React Router Dom中Route内部的渲染组件

Question

我想用React Router Domv6.2.2在父组件中渲染子组件，这就是我尝试的方法，但浏览器最终什么也没显示：

const MainLayout = props => {
return (
<div className='main-layout'>
<Header />
<div className='main'>
{props.children}
</div>
</div>
)
}

App.js:

function App() {
return (
<div className="App">
<BrowserRouter>
<Routes>
<Route exact path="/" render={() => (
<MainLayout>
<Homepage />
</MainLayout>
)} />
</Routes>
</BrowserRouter>

Answer 1

您应该使用Route的element属性来渲染组件，因为您使用的是React Router Domv6、component和render用于早期版本，或者简单地将其封装在Route:中

export default function App() {
return (
<div className="App">
<BrowserRouter>
<Routes>
<Route exact path="/">
<MainLayout>
<Homepage />
</MainLayout>
</Route>
</Routes>
</BrowserRouter>
</div>
);
}

Answer 2

function App() {
return (
<div className="App">
<BrowserRouter>
<Routes>
<Route exact path="/" element={<MainLayout />}>
<Route path="/home" element={<Homepage />} />
</Route>
</Routes>
</BrowserRouter>
</div>
)
}

并在MainLayout组件中添加Outlet组件

const MainLayout = props => {
return (
<>
<div className="main-layout">
<Header />
<div className="main">{props.children}</div>
</div>
<Outlet />
</>
)
}