React多个组件嵌套路由

Question

我在一个.js文件中创建了多个组件例如:在Home.js文件下——>Blog, about和contact类组件

Home.js文件现在我想渲染所有的组件(blog, about, contact)在home下。App.js文件，我想路由

我不确定在element或任何其他选项中添加什么。

我试过用<Home />，但它不是解决方案。

Answer 1

如果你想让Home组件保持挂载，也渲染Blog,About，或Contact组件作为布局路由，那么Home应该更新为渲染一个Outlet组件，用于嵌套路由渲染它们的内容。

的例子:

import { Outlet } from 'react-router-dom';
export const Home = () => {
return (
<div>
This is home page
<Outlet />
</div>
);
};
export const Blog = () => <div>Blog Content</div>;
export const About = () => <div>About Content</div>;
export const Contact = () => <div>Contact Details</div>;

<BrowserRouter>
<HeaderP />
<Routes>
<Route path="/" element={<Home />}>
<Route path="blog" element={<Blog />} />
<Route path="about" element={<About />} />
<Route path="contact" element={<Contact />} />
</Route>
</Routes>
</BrowserRouter>

如果你只想让每个组件单独呈现在自己的页面上，那么打开blog, about和contact路由。

export const Home = () => <div>This is home page</div>;
export const Blog = () => <div>Blog Content</div>;
export const About = () => <div>About Content</div>;
export const Contact = () => <div>Contact Details</div>;

<BrowserRouter>
<HeaderP />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/blog" element={<Blog />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</BrowserRouter>