react路由6.0使用笔记

基本使用

1. 首先安装依赖

npm i react-router-dom

2. 引入实现路由所需的组件，以及页面组件

注意： BrowserRouter 组件最好放在最顶层所有组件之外，确保内部组件使用link做路由跳转时不出错

import { BrowserRouter, Route, Routes } from "react-router-dom";
import Login from "./view/login";
import Layout from "./view/layout";
function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* path指定页面显示的路由路径 */}
        {/* element指定渲染的组件 */}
        <Route path="/login" element={<Login />}></Route>
        <Route path="/" element={<Layout />}></Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

路由跳转

注意：路径以 / 开头的则是绝对路径，否则为相对路径，既相对于当前RUL的路径进行改变

link组件

import { Link } from "react-router-dom";
function Login() {
  return (
    <div>
      我的登录页面
      <button>
        {/* Link组件只能在Router内部使用，
        因此使用到Link组件的组件一定要放在顶层的Router之内 */}
        {/* to 指定要跳转的路由路径 */}
        <Link to="/home">立即登录</Link>
      </button>
    </div>
  );
}
export default Login;

NavLink组件

import { NavLink } from "react-router-dom";
function Login() {
  return (
    <div>
      我的登录页面
      <button>
        {/* NavLink组件和Link组件的功能是一致的，区别在于可以判断其to属性是否是当前匹配到的路由 */}
        {/* NavLink组件的style或className可以接收一个函数，函数接收一个isActive参数，可根据该参数调整样式 */}
        <NavLink
          style={(isActive) => ({ color: isActive ? "red" : "#fff" })}
          to="/home"
        >
          立即登录
        </NavLink>
      </button>
    </div>
  );
}
export default Login;

编程式跳转

import { useNavigate } from "react-router-dom";
function Login() {
  /* 使用useNavigate钩子函数生成navigate对象，可以通过JS代码完成路由跳转 */
  /* useNavigate取代了原先版本中的useHistory */
  const navigate = useNavigate();
  return (
    <div>
      我的登录页面
      <button onClick={() => navigate("/home")}>立即登录</button>
    </div>
  );
}
export default Login;

动态路由参数

路径参数

在Route组件中的path属性中定义路径参数

在组件内通过useParams hook访问路径参数

<BrowserRouter>
    <Routes>
        <Route path='/foo/:id' element={Foo} />
    </Routes>
</BrowserRouter>
​
import { useParams } from 'react-router-dom';
export default function Foo(){
    const params = useParams();
    return (
        <div>
            <h1>{params.id}</h1>
        </div>
    )
}

search参数

• 查询参数不需要在路由中定义
• 使用useSearchParams hook来访问查询参数。其用法和useState类似，会返回当前对象和更改它的方法
• 更改searchParams时，必须传入所有的查询参数，否则会覆盖已有参数

import { useSearchParams } from 'react-router-dom';
​
// 当前路径为 /foo?id=12
function Foo(){
    const [searchParams, setSearchParams] = useSearchParams();
    console.log(searchParams.get('id')) // 12
    setSearchParams({
        name: 'foo'
    }) // /foo?name=foo
    return (
        <div>foo</div>
    )
}

嵌套路由

通过嵌套的方式 书写Route组件 实现对嵌套路由的定义

<Routes>
  <Route path="/" element={<Home/>} ></Route>
  <Route path="/father" element={<Father/>} >
    <Route path='child' element={<Child/>}></Route>
  </Route>
</Routes>

在父组件中使用 Outlet 来显示匹配到的子组件

import {Outlet} from 'react-router-dom';
function Father(){
    return (
        <div>
            // ... 自己组件的内容
            // 留给子组件Child的出口
            <Outlet />
        </div>
    )
}

默认路由

定义：在嵌套路由中，如果URL仅匹配了父级URL,则 Outlet 中会显示带有 index 属性的路由

<Routes>
    <Route path='/foo' element={Foo}>
        <Route index element={Default}></Route>
        <Route path='bar' element={Bar}></Route>
    </Route>
</Routes>

全匹配路由

定义： path属性取值为 * 时，可以匹配任何（非空）路径，同时该匹配拥有最低的优先级。可以用于设置404页面

<Routes>
    <Route path='/foo' element={Foo}>
        <Route path='bar' element={Bar}></Route>
        <Route path='*' element={NotFound}></Route>
    </Route>
</Routes>

多组路由

通常，一个应用中只有一个Routes组件。

但根据实际需要也可以定义多个路由出口（如侧边栏和主页面都要随URL而变化）

<Router>
    <SideBar>
        <Routes>
            <Route></Route>
        </Routes>
    </SideBar>
    <Main>
        <Routes>
            <Route></Route>
        </Routes>
    </Main>
</Router>

重定向

当在某个路径/a下，要重定向到路径/b时，可以通过Navigate组件进行重定向到其他路径

import { Navigate } from 'react-router-dom';
function A(){
    return (
        <Navigate to="/b" />
    )
}