第 1 步：设置 react router v6
npm i -d react-router-dom@latest
第2步：定义路由结构
接下来，在 app.js 文件中定义路由的结构。我们将为主页、关于页面和联系页面创建路由，并将它们与相应的组件关联起来。
// app.js
import 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 (
}>
} />
} />
} />
</routes></router>
);
}
export default app;
第三步：创建布局组件
现在，让我们创建一个布局组件（layout.js），它将包含我们的共享标题和主要内容区域。
// layout.js
import react from 'react';
import { outlet } from 'react-router-dom';
function layout() {
return (
);
}
export default layout;
第四步：创建页面组件
为主页、关于页面和联系页面创建单独的组件。这些组件将代表每个页面的内容。
家居组件
// home.js
import react from 'react';
function home() {
return (
home page
welcome to the home page!
);
}
export default home;
关于组件
// about.js
import react from 'react';
function about() {
return (
about page
learn more about us!
);
}
export default about;
接触元件
// Contact.js
import React from 'react';
function Contact() {
return (
Contact Page
Reach out to us!
);
}
export default Contact;
结论
恭喜！您已经使用 react router v6 成功构建了布局，允许您在不同页面之间导航，同时在整个应用程序中保持一致的布局。这种方法为具有多个路由的 react 应用程序提供了一个干净且有组织的结构。尝试添加更多路由和组件以进一步增强您的应用程序！
