React之react-router-dom6用法

最新推荐文章于 2024-09-26 10:39:16 发布

YYTX_YS

最新推荐文章于 2024-09-26 10:39:16 发布

阅读量116

点赞数

分类专栏： react 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/YYTX_YS/article/details/129500027

版权

react 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了如何在React应用中使用react-router-domv6进行路由配置。首先在index.js中设置BrowserRouter，然后在App.js中注册并配置Routes，包括使用NavLink创建导航按钮，用Route定义页面路径。此外，还展示了如何通过路由表方式来管理路由，并使用useRoutesHook加载路由配置。

摘要由CSDN通过智能技术生成

npm install react-router-dom@6 -S

1.在入口文件index.js配置路由模式

import { BrowserRouter } from 'react-router-dom'
...
<BrowserRouter><App /></BrowserRouter>

2.在App.js中注册路由

import { NavLink,Routes,Route,Navigate } from "react-router-dom";
import Page1 from "./pages/page1/Page1";
import Page2 from "./pages/page2/Page2";
import './App.css'
function App() {
  const computedActive = ({isActive}) => {
    return isActive ? 'activeNav':''
  }
  return (
    <div className="App">
      // 导航按钮
      <NavLink className={computedActive} to="/page1">page1</NavLink>
      <NavLink className={computedActive} to="/page2">page2</NavLink>
      // 注册路由（需要用Routes标签包裹，同时组件的关联也改为element）
      <Routes>
        <Route path="/page1" element={<Page1></Page1>}></Route>
        <Route path="/page2" element={<Page2></Page2>}></Route>
        <Route path="/" element={<Navigate to="/page1"/>}></Route>
      </Routes>
    </div>
  );
}

export default App;

不直接注册路由，使用路由表配置

路由表：

import { Navigate } from "react-router-dom";
import Page1 from "../pages/page1/Page1";
import Page2 from "../pages/page2/Page2";
export default [
  {
    path: '/page1',
    element: <Page1 />
  },
  {
    path: '/page2',
    element: <Page2 />
  },
  {
    path: '/',
    element: <Navigate to="/page1"/>
  }
]

App.js中使用路由表

import { useRoutes } from "react-router-dom";
import './App.css'
import routerConfig from '../routes/index'
function App() {
  const computedActive = ({isActive}) => {
    return isActive ? 'activeNav':''
  }
  const routerList = useRoutes(routerConfig)
  return (
    <div className="App">
      // 导航按钮
      <NavLink className={computedActive} to="/page1">page1</NavLink>
      <NavLink className={computedActive} to="/page2">page2</NavLink>
      // 注册路由（需要用Routes标签包裹，同时组件的关联也改为element）
      { routerList }
    </div>
  );
}

export default App;