09 react-router学习

react router

demo：表示点击首页，显示Home组件内容，点击关于显示About组件内容

// 引入两个组件
import Home from './Home'
import About from './About'

import { BrowserRouter, Link, Routes, Route } from 'react-router-dom'

// 进行路由配置
function App () {
  return (
    // 声明当前要用一个非hash模式的路由
    <BrowserRouter>
      {/* 用来指定跳转的组件 */}
      <Link to='/'>首页</Link>
      <Link to='/about'>关于</Link>

      {/* 路由出口 路由对应的组件会在这里进行渲染 */}
      <Routes>
        {/* 指定路径和组件的对应关系 path代表路径  element代表组件 */}
        <Route path='/' element={<Home />}></Route>
        <Route path='/about' element={<About />}></Route>
      </Routes>
    </BrowserRouter>
  )
}

核心组件

BrowerRouter

包裹整个应用，一个react应用只需要使用一次

两种常用Router： HashRouter和BrowerRouter

模式	实现方式	路由url表现
HashRouter	监听url hash值实现	http://localhost:3000/#/about
BrowerRouter	h5的 history.pushState API实现	http://localhost:3000/about

推荐使用BrowerRouter模式

Link

指定导航链接，完成路由跳转

to属性指定路由地址，实际上就是一个a链接

类似于vue的router-link

Routes

提供一个路由出口，组件内部会存在多个内置的Route组件，满足条件的路由会被渲染到组件内部

类似与vue的router-view

Route

用于指定导航链接，完成路由匹配

path属性用来指定匹配的路径地址，element属性指定要渲染的组件

编程式导航

跳转

实现步骤：

1. 导入一个 useNavigate 钩子函数
2. 执行 useNavigate 函数 得到 跳转函数
3. 在事件中执行跳转函数完成路由跳转

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

function Login () {

  // 跳转到关于页
  const nagigate = useNavigate()

  function goAbout () {
    // 累积跳转
    // nagigate('/about')
    
    // 替换跳转，不能返回
    nagigate('/about', { replace: true })

  }

  return (
    <div>
      login
      <button onClick={goAbout}>跳转到关于页</button>
    </div>
  )
}

路由参数

传递参数：使用searchParams传参，使用params传参

searchParams传参

nagigate('/about?id=1')

let [params] = useSearchParams()
let id = params.get('id')

例如：

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

function Login () {
  const nagigate = useNavigate()
  function goAbout () {
    nagigate('/about?id=10010', { replace: true })
  }
  return (
    <div>
      login
      <button onClick={goAbout}>跳转到关于页</button>
    </div>
  )
}

export default Login

import { useSearchParams } from "react-router-dom"

function About () {
  let [params] = useSearchParams()
  let id = params.get('id')
  return (
    <div>about---------{id}</div>
  )
}
export default About

注意：如果传递参数两个相同的情况，则以第一个为准

例如：
 nagigate('/about?id=10010&age=18&id=12222', { replace: true })
 
 则获取的id为10010，不是12222

params传参

nagigate('/about/10010')

let [params] = useParams()
let id = params.id

如果需要使用params传参

则需要如下设置路由
<Route path='/about/:id' element={<About />}></Route>

路由跳转

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

function Login () {
  const nagigate = useNavigate()
  function goAbout () {
    nagigate('/about/10', { replace: true })
  }
  return (
    <div>
      login
      <button onClick={goAbout}>跳转到关于页</button>
    </div>
  )
}

export default Login

获取参数

import { useParams, useSearchParams } from "react-router-dom"

function About () {
  let pathParams = useParams()
  let id = pathParams.id
  return (
    <div>about---------{id}</div>
  )
}
export default About

嵌套路由

实现步骤：

1. App.js中定义嵌套路由声明
2. Layout组件内部通过 指定二级路由出口

配置路由地方：

// 引入两个组件
import Login from './Login'
import Layout from './Layout'
import Board from './Board'
import Article from './Article'
import { BrowserRouter, Link, Routes, Route } from 'react-router-dom'

// 进行路由配置
function App () {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='/' element={<Layout />}>
          <Route path='board' element={<Board />}></Route>
          <Route path='article' element={<Article />}></Route>
        </Route>
        <Route path='/login' element={<Login />}></Route>
      </Routes>
    </BrowserRouter>
  )
}

export default App

二级路由地方

import { Outlet, useNavigate } from 'react-router-dom'

function Layout () {
  return (
    <div>
      Layout
      {/* 二级路由出口 */}
      <Outlet />
    </div>
  )
}

export default Layout

设置默认二级路由：

实现步骤:

1. 给默认二级路由标记index属性
2. 把原本的路径path属性去掉

function App () {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='/' element={<Layout />}>
          {/* <Route path='board' element={<Board />}></Route> */}
          <Route index element={<Board />}></Route>
          <Route path='article' element={<Article />}></Route>
        </Route>
        <Route path='/login' element={<Login />}></Route>
      </Routes>
    </BrowserRouter>
  )
}

配置404

当所有的路由没有匹配时，默认匹配

 <Route path='*' element={<NotFound />}></Route>

function App () {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='/' element={<Layout />}>
          {/* <Route path='board' element={<Board />}></Route> */}
          <Route index element={<Board />}></Route>
          <Route path='article' element={<Article />}></Route>
        </Route>
        <Route path='/login' element={<Login />}></Route>
        <Route path='*' element={<NotFound />}></Route>
      </Routes>
    </BrowserRouter>
  )
}

集中式配置路由

权限管理，不同的用户路由不同

import { BrowserRouter, Routes, Route, useRoutes } from 'react-router-dom'

import Layout from './pages/Layout'
import Board from './pages/Board'
import Article from './pages/Article'
import NotFound from './pages/NotFound'

// 1. 准备一个路由数组 数组中定义所有的路由对应关系
const routesList = [
  {
    path: '/',
    element: <Layout />,
    children: [
      {
        element: <Board />,
        index: true, // index设置为true 变成默认的二级路由
      },
      {
        path: 'article',
        element: <Article />,
      },
    ],
  },
  // 增加n个路由对应关系
  {
    path: '*',
    element: <NotFound />,
  },
]

// 2. 使用useRoutes方法传入routesList生成Routes组件
function WrapperRoutes() {
  let element = useRoutes(routesList)
  return element
}

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <WrapperRoutes />
      </BrowserRouter>
    </div>
  )
}

export default App