使用 React Router v6 进行布局

第 1 步：设置 react router v6npm i -d react-router-dom@latest登录后复制 第2步：定义路由结构接下来，在 app.js 文件中定义路由的结构。我们将为主页、关于页面和联系页面创建路由，并将它们与相应的组件关联起来。// app.jsimport react from 'react';import { browserrouter as router, routes, route } from 'react-router-dom';import layout from './layout';import home from './home';import about from './about';import contact from './contact';function app() { return ( <router><routes><route path="/" element="{&lt;layout"></route>}&gt; <route index element="{&lt;home"></route>} /&gt; <route path="/about" element="{&lt;about"></route>} /&gt; <route path="/contact" element="{&lt;contact"></route>} /&gt; </routes></router> );}export default app;登录后复制 第三步：创建布局组件现在，让我们创建一个布局组件（layout.js），它将包含我们的共享标题和主要内容区域。// layout.jsimport react from 'react';import { outlet } from 'react-router-dom';function layout() { return ( <div> <header><h1>my app</h1> <nav><ul><li><a href="/">home</a></li> <li><a href="/about">about</a></li> <li><a href="/contact">contact</a></li> </ul></nav></header><main><outlet></outlet></main></div> );}export default layout;登录后复制 第四步：创建页面组件为主页、关于页面和联系页面创建单独的组件。这些组件将代表每个页面的内容。 家居组件// home.jsimport react from 'react';function home() { return ( <div> <h2>home page</h2> <p>welcome to the home page!</p> </div> );}export default home;登录后复制 关于组件// about.jsimport react from 'react';function about() { return ( <div> <h2>about page</h2> <p>learn more about us!</p> </div> );}export default about;登录后复制 接触元件// Contact.jsimport React from 'react';function Contact() { return ( <div> <h2>Contact Page</h2> <p>Reach out to us!</p> </div> );}export default Contact;登录后复制 结论恭喜！您已经使用 react router v6 成功构建了布局，允许您在不同页面之间导航，同时在整个应用程序中保持一致的布局。这种方法为具有多个路由的 react 应用程序提供了一个干净且有组织的结构。尝试添加更多路由和组件以进一步增强您的应用程序！ 以上就是使用 React Router v6 进行布局的详细内容，更多请关注我的其它相关文章！