react 路由6跳转页面

要实现React路由6的页面跳转，首先需要安装react-router-dom库。你可以使用以下命令来安装路由：npm i react-router-dom --save 或者 yarn add react-router-dom --save。
接下来，你需要在App.js文件中创建一级路由，并导入路由表和CSS样式。可以参考以下代码示例：
import { NavLink, useRoutes } from 'react-router-dom';
import routes from './routers'; // 导入路由表
import './App.css'; // 导入CSS文件

function App() {
const element = useRoutes(routes);

return (
<div>
<div className="nav">
<NavLink className='navLink' to="/about">About</NavLink>
<NavLink className='navLink' to="/home">Home</NavLink>
</div>
<div className="main">{element}</div>
</div>
);
}

export default App;
登录后复制
在上面的代码中，我们使用useRoutes方法将路由表应用到组件中，并使用NavLink组件来创建导航链接。
接下来，你可以在Home.jsx文件中编写具体的页面内容。以下是一个示例：
import React from 'react';
import { NavLink, Outlet } from 'react-router-dom';

const Home = () => {
return (
<div>
<p style={{ 'textAlign': 'center' }}>Home页面</p>
<div className="nav">
<NavLink className="navLink" to="message">Message</NavLink>
<NavLink className="navLink" to="news">News</NavLink>
<Outlet />
</div>
</div>
);
}

export default Home;
登录后复制
上述代码中，我们使用NavLink组件创建了两个导航链接，并通过Outlet组件来渲染子页面。
这样，你就可以使用React路由6进行页面跳转了。根据你的路由配置，点击导航链接将会显示相应的页面。123
引用[.reference_title]

1 2 3 在react脚手架中react router v6 路由表、嵌套路由、编程式路由的使用，react点击按钮跳转页面并传参[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2allinsert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]