React中Router6从安装到入门详细教程

一.安装react-router

如果使用 npm 的话则是

npm install react-router-dom

yarn 安装

yarn add react-router-dom

注意：如果要安装router5的小伙伴一定要带上@版本号，默认是6版本的噢

二.引入react-router

在index.js中引入react-router-dom，并用BrowserRouter组件包裹着APP组件，用于路由可以正常跳转

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<BrowserRouter><App /></BrowserRouter>)
export default root

三.使用路由6的基本步骤

（1）引入NavLink或者link路由链接

NavLink有高亮的效果，Link则是普通的链接

import { NavLink } from 'react-router-dom'

（2）路由链接以及to属性

to属性是需要跳转的路由链接

      {/* 路由链接 */}
      <NavLink to="/home">Home</NavLink>
      <NavLink to="/about">About</NavLink>

（3）注册路由

引入Routes和Route用于注册路由，Routes必须包裹着Route

Route组件决定着在浏览器输入要匹配哪个组件，里面有两个属性，path和element，path为路由的路径，element为路由跳转的组件

import { Routes, Route } from "react-router-dom";

function App() {
  return (
    <Routes>
      <Route path="/home" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  );
}

 四.Navigate重定向

Navigate组件中有个to属性就是重定向的路由地址

import { Navigate } from 'react-router-dom'
{/* 注册路由 */}
<Routes>
   <Route path='/home' element={<Home />} />
   <Route path='/about' element={<About />} />
   {/* Navigate 重定向 */}
   <Route path='/' element={<Navigate to="about" />} />
</Routes>

五.路由链接高亮isActive

路由链接的className中可以传入一个回调，该回调接收其中一个参数为isActive，如果点击当前路由链接，isActive返回true，否则为false

function componentClassName({ isActive }) {
  return isActive ? 'colorStyle' : ''
}

{/* 路由链接 */}
<NavLink to="/home" className={componentClassName}>Home</NavLink>
<NavLink to="/about" className={componentClassName}>About</NavLink>

六.路由表useRoutes

（1）新建路由表文件

如果是大型项目，需要新建路由表文件并进行默认导出

import { Navigate } from 'react-router-dom'
import React from "react";
import Home from '../pages/home'
import About from '../pages/about'

export default [
    {
        path: '/home',
        element: <Home />
    },
    {
        path: '/about',
        element: <About />
    },
    {
        path: '/',
        element: <Navigate to="/about" />
    }
]

（2）引入路由表和useRoutes

import { useRoutes } from 'react-router-dom'
import routes from './routes'

（3）调用useRoutes，传入路由表

export default function App() {
  const element = useRoutes(routes)
  return (
    <div>
      {/* 路由链接 */}
      <NavLink to="/home" className={componentClassName}>Home</NavLink>
      <NavLink to="/about" className={componentClassName}>About</NavLink>
      {/* 把路由组件放置合适的位置占位 */}
      {element}
      <UserState />
      <UseEffect />
      <UseRef/>
    </div>
  )
}

（4）路由组件进行占位

把路由组件放置合适的位置占位

七.嵌套路由

（1）路由表添加children属性

import { Navigate } from 'react-router-dom'
import React from "react";
import Home from '../pages/home'
import About from '../pages/about'
import Message from '../pages/message';
import News from '../pages/news';

export default [
    {
        path: '/home',
        element: <Home />,
        children: [{ // 子路由用children属性
            path: 'message',
            element: <Message />,
        },{
            path: 'news',
            element: <News />,
        },]
    },
    {
        path: '/about',
        element: <About />
    },
    {
        path: '/',
        element: <Navigate to="/about" />
    }
]

（2）使用outLet指定子路由的位置

import React from 'react'
import { NavLink, Outlet } from 'react-router-dom'

export default function Home() {
  return (
    <div>
      我是Home
      <NavLink to="message">message</NavLink>
      <NavLink to="news">news</NavLink>
      {/* 指定路由组件呈现的位置 */}
      <Outlet />
    </div>
  )
}