React路由

原创已于 2022-09-08 20:07:51 修改 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

于 2022-09-08 12:55:58 首次发布

本文详细介绍了如何在React应用中配置和使用React Router，包括安装依赖、设置BrowserRouter、使用Link和Route、实现导航跳转、处理参数传递、使用Navigate进行重定向、实现NavLink的高亮以及使用useRoutes创建路由表。同时讲解了嵌套路由和不同类型的参数传递方式，包括params、search和state参数。

配置路由

1.安装依赖

npm i react-router-dom

2.在index.js中BrowserRouter把<App />包裹住

3.在页面使用<Link>编写路由链接<Route>

注：使用<Route>注册路由，必须用<Routes>包裹住

useNavigate()函数式编程式路由跳转

注意：参数只能传state

1.导入useNavigate

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

const navigate = useNavigate()

 //navigate (1) 前进1
 //navigate (-1) 后退1
 //detail是路由名称，使用路由表，子路由前面不能加'/'
 function detail(){
    navigate('detail',{
      replace:false,
      state:{
        id:123,
        name:'lxy',
        age:18
      }
    })
  }

类式编程式路由跳转、传参

## 跳转方式

1.this.props.history.push() //可以后退

2.this.props.history.replace() //不可以后退

3.this.props.history.goBack() //后退

4.this.props.history.goForward() //前进

5.this.props.history.go()

## 1.params参数

路由链接：this.props.history.push(`/home/18/lxy`)

注册路由（声明参数）：<Route path="/home/:age/:name" component={Home}/>

接收参数：this.props.match.params参数

## 2.search参数

路由链接：this.props.history.push(`/home?age=18&name=lxy`)

注册路由（无需声明参数）：<Route path="/home" component={Home}/>

接收参数：

1.导入qs库：import qs from "qs"

2.this.props.location.search

## 2.search参数

路由链接：this.props.history.push(`/home`,{age:18,name:'lxy'})

注册路由（无需声明参数）：<Route path="/home" component={Home}/>

接收参数：this.props.location.state

备注：刷新参数也在

Navigate（路由重定向）

1.导入

import {Navigate} from "react-router-dom";

2.使用

<Route path="/" element={<Navigate to="/home" />} />

NavLink路由高亮，有两种写法

方式1：回调函数，isActive是自定义参数

<NavLink className={({isActive}) => isActive?'active_router':'NavLink'} to="/home">home</NavLink>

方式2：绑定方法

HTML:

<NavLink className={computedClassName} to="/about">about</NavLink>

JS:

  function computedClassName({ isActive }) {
    return isActive ? "active_router" : "NavLink";
  }

useRoutes路由表

1.在src目录下新建routes文件夹，在routes文件夹新建index.js(用于管理路由)

routes/index.js文件

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

const routes = [
  {
    path: "/home",
    element: <Home />,
  },
  {
    path: "/about",
    element: <About />,
  },
  {
    path: "/",
    element: <Navigate to="/home" />,
  },
];

export default routes;

页面使用：

嵌套路由

路由表：

注意：子路由的path的值不能加‘/’

页面使用：

注意：这里跳转子路由也不能加'/'

params参数（参数可见，需要声明）

传参数

<Link to={`detail/${item.id}/${item.name}/${item.age}`}>{item.name}</Link>

路由配置参数

{
    path: "detail/:id/:name/:age",
    element: <Detail />,
},

页面接收参数

import { useParams } from "react-router-dom";

  const{id,name,age} = useParams()

search参数（参数可见，不用声明）

传参数

<Link to={`detail?id=${item.id}&name=${item.name}&age=${item.age}`}>{item.name}</Link>

页面接收参数

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

  const [search,setSearch] = useSearchParams()
  let id = search.get('id')
  const name = search.get('name')
  const age = search.get('age')

  //setSearch是修改search参数的方法
  function click(){
    setSearch('id=4&name=ddd&age=16')
  }

state参数（参数不可见，不用声明）

传参数

<Link to="detail" state={{id:item.id,name:item.name,age:item.age}}>{item.name}</Link>

页面接收

import { useLocation } from "react-router-dom";

const {id,name,age} = useLocation().state