在切换路由路由时间它正在工作，但现在最新的新路由，路由它不起作用自定义路由

Question

在切换路由路由时它工作，但现在是最新的新路由，路由它不工作自定义路由我已经在HomeLayoutHOC中包装了导航栏页面和主页有人能帮我吗：(如何做这个最新版本我试过了，但有很多事情。此没有结果

我想要"HomeLayoutHOC"；路由而不是"路由"；路由">

->clientsrcApp.JSX : 
//HOC
import HomeLayoutHOC from "./HOC/Home.Hoc";
import { Route, Routes } from "react-router-dom";
//Component
import Temp from "./Components/temp";
function App() {
return (
<>
<Routes>
<HomeLayoutHOC path="/" exact element={Temp} />       // <--- I want this to work! 
// <Route path="/" element={<Temp />} />    //              <-- this working fine 
</Routes>
</>
);
}
export default App;

结果👇

屏幕截图！

->client\src\index.jsx:

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import "./index.CSS";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);

->client\src\HOC\Home。Hoc.jsx

import React from "react";
import { Route } from "react-router-dom";
// Layout
import HomeLayout from "../Layout/Home.Layout";
const HomeLayoutHOC = ({ component: Component, ...rest }) => {
return (
<>
<Route
{...rest}
component={(props) => (
<HomeLayout>
<Component {...props} />
</HomeLayout>
)}
/>
</>
);
};
export default HomeLayoutHOC;

->client\src\Layout\Home。Layout.jsx

import React from "react";
// Components
import Navbar from "../Components/Navbar";
const HomeLayout = (props) => {
return (
<>
<Navbar />
<div className="container mx-auto px-4 lg:px-20 ">{props.children}</div>
</>
);
};
export default HomeLayout;

请给我最新路由器dom(Routes，Route(的可能建议

包装/合成

我如何扩展routeProps以使其可用于渲染组件最新的路由器dom(Routes，Route(

Answer 1

react-router-dom@6消除了对自定义路由组件的需求和兼容性。在Routes组件中，将以外的任何渲染为Route或React.Fragment组件都是不变的违反。自定义路由组件被替换为在包装要渲染的element的单个路由上使用包装器组件，或者被可以包装任何数量的嵌套Route组件的布局路由组件。

• Wrapper组件渲染children道具

  <Route
  path="/"
  element={(
  <Wrapper>
  <Componenet />
  </Wrapper>
  )}
  >
  

• 布局路由组件为嵌套路由渲染Outlet组件，以将其element道具渲染到。

  <Route element={<Layout />}>
  <Route path="/" element={<Componenet />} />
  </Route>
  

您要求的是Layout Route版本，因为您似乎希望将Navbar组件作为更大布局的一部分进行渲染。

主页布局

import React from "react";
import { Outlet } from "react-router-dom";
import Navbar from "../Components/Navbar";
const HomeLayout = () => {
return (
<>
<Navbar />
<div className="container mx-auto px-4 lg:px-20 ">
<Outlet />
</div>
</>
);
};
export default HomeLayout;

应用

将无路径路由上的HomeLayout渲染为布局路由。嵌套的Route组件将其内容呈现到出口中。

import { Route, Routes } from "react-router-dom";
import HomeLayout from "./path/to/HomeLayout";
import Temp from "./Components/temp";
function App() {
return (
<Routes>
<Route element={<HomeLayout />}>
<Route path="/" element={<Temp />} />
... other routes to render with Home layout and Navbar ...
</Route>
... other routes to render without Home layout and Navbar ...
</Routes>
);
}

这里你应该注意到的一个重要方面是RRDv6删除了路由道具，所有旧的"；道具"；现在只能通过路由组件中的React钩子访问，即useNavigate、useLocation、useParams等。如果您仍在使用基于React类的组件，它们将无法使用React钩子，并且由于RRDv6也不再导出withRouter高阶组件，那么，您将需要自己滚动。请参阅路由器发生了什么？我需要它！详细信息。