react学习之react-router路由

1、下载依赖包

npm install react-router-dom@6

2、路由demo

• app页面

import Home from './pages/Home'
import About from './pages/About'

import { HashRouter, BrowserRouter, Link, Routes, Route } from 'react-router-dom'
function App() {
  return (
    // 声明当前使用非hash模式的路由
    <HashRouter>
      <div className='App'>
      
        {/* 指定跳转的组件 to用来配置路由地址*/}
        <Link to='/'>首页</Link>
        <Link to='/about'>关于</Link>
        
        {/* 路由出口 路由对应的组件会在这里进行渲染*/}
        <Routes>
          {/* 指定路径和组件的对应关系 path代表路径 element代表组件 成对出现*/}
          <Route path='/' element={<Home />}></Route>
          <Route path='/about' element={<About />}></Route>
        </Routes>
        
      </div>
    </HashRouter>
  )
}

export default App

• Home页面

export default function Home() {
  return <h2>Home</h2>
}

• About页面

export default function About() {
  return <h2>About</h2>
}

3、路由核心组件介绍

BrowerRouter

作用：包裹整个应用，一个React应用只需要使用一次

两种常用Router:BrowerRouter和HashRouter（history和hash路由）

Link

作用：用于指定导航链接，完成路由跳转

语法说明：组件通过to属性指定路由地址，最终会渲染为a链接元素

Routes

作用：提供一个路由出口，满足条件的路由组件会渲染到组件内部

Route

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

语法说明：path属性指定匹配的路径地址，element属性指定要渲染的组件

4、编程式导航

语法说明：

1. 导入useNavigate钩子函数
2. 执行钩子函数得到跳转函数
3. 执行跳转函数完成跳转

新建login页面

// 1、导入useNavigate
import { useNavigate } from 'react-router-dom'
export default function Login() {
  // 2、执行useNavigate得到一个跳转函数
  const navigate = useNavigate()

  // 3、跳转到关于页
  const goAbout = () => { 
    // 如果在跳转时不想加入历史记录，可以添加额外参数replace为true
    navigate('/about', { replace: true })
  }

  return (
    <div>
      <button onClick={goAbout}>跳转至about</button>
      <h2>Login</h2>
    </div>
  )
}

在app.js中引入Login页面，并且在路由中注册

import Login from './pages/Login'

...
<Routes>
    ...
    <Route path='/login' element={<Login />}></Route>
</Routes>

5、路由跳转携带参数（两种方式：searchParams和params）

searchParams

传参

navigate('/about?id=001')

取参

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

params

传参

navigate('/about/001')

取参

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

还需要在路由注册的地方填个坑

 <Route path='/about/:id' element={<About />}></Route>

6、嵌套路由

• app.js

默认二级路由设置：添加index属性，把path去掉

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

import { HashRouter, Routes, Route } from 'react-router-dom'
function App() {
  return (
    <HashRouter>
      <div className='App'>
        <Routes>
          <Route path='/layout' element={<Layout />}>
            {/* 定义二级路由嵌套 */}
            {/* 默认二级路由：添加index属性，把path去掉 */}
            <Route index element={<Board />}></Route>
            <Route path='article' element={<Article />}></Route>
          </Route>
        </Routes>
      </div>
    </HashRouter>
  )
}

export default App

• 一级路由页面：layout组件——需要在渲染二级组件的地方配置一个Outlet路由出口组件

import { Outlet } from 'react-router-dom'
export default function Layout() {
  return (
    <div>
      <h2>layout</h2>
      {/* 二级路由出口 */}
      <Outlet />
    </div>
  )
}

• 二级路由1：Board

export default function Board() {
  return (
    <div>
      <h2>this is Board</h2>
    </div>
  )
}

• 二级路由2：Article

export default function Article() {
  return (
    <div>
      <h2>this is Article</h2>
    </div>
  )
}

7、404路由配置

设置path为*，渲染对象404展示页面组件即可

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