React路由安装以及使用，以及有关路由的具体知识

本文链接：https://blog.youkuaiyun.com/xinmenglin/article/details/105418918

本文详细介绍了React路由的安装过程，包括`react-router-dom`的添加，并讲解了如何导入和使用关键组件如`BrowserRouter`, `Route`, `Link`等。还探讨了路由参数、子路由、重定向以及`match`, `history`对象的用法，为React应用的路由管理提供全面指导。" 51772311,1403672,Java中的责任链模式及其在Tomcat中的应用解析,"['Java设计模式', 'Web开发', 'Tomcat框架', '过滤器']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

路由的安装

yarn add react-router-dom

导入路由需要的组件

import { BrowserRouter as Router, Route, Link } from “react-router-dom”;

路由组件解释

Router总路由
link 路由导航
linkto 切换的连接
Route 路由
Routepath 对应链接
Routecomponent 对应组件

路由的参数

定义指定Link指令

<Link to="/produce/1">产品1</Link>

定义路由

<Route path="/produce/:id" component={Produce}></Route>

定义组件-获取路由参数

  function Produce({match}){
      return (<h1>我是产品:{match.params.id}</h1>);
  }

子路由

导入Navlink

import {BrowserRouter as Router,Route,Link,NavLink} from 'react-router-dom'

01 定义指令 Link指令

<NavLink to="/detail">详情</NavLink>

02 定义主路由

<Route path="/detail" component={Detail}></Route>

03 编写主路由

function Detail({location,match}){
  return (
    <div>
      <div><NavLink to={match.url+'/arg'}>参数</NavLink> | <NavLink to={match.url+'/com'}>评论</NavLink> | </div>
      <hr/>
      <Route path={match.url+'/arg'} component={Arg}></Route>
      <Route path={match.url+'/com'} component={Com}></Route>
    </div>);
}

## 04 编写子路由`

function Arg(){
  return (<h1>我是Arg      </h1>);
}

function Com(){
  return (<h1>我是com</h1>);
}

`重定向

我们需要写一个默认的子路由。可以用来重定向
01 导入重定向

import {
 BrowserRouter as Router,
 Route,
 Link,
 Switch,
 NavLink,
 Redirect
}

组件的参数

function About({match,history,location}){
  console.log(match,history,location)
  return (<h1>我是about</h1>);
}

match匹配的当前路由

isExact: true ,//是否精确匹配
params:{}// 当前路由的参数
path:{} //路由指定的path
url：{}// link 指定的链接地址

history 当前路由信息

go() 历史记录跳转
goBack() 历史记录返回
goFoward() 前进
length 历史记录的长度
push() 跳转有历史记录
replace() 跳转没有历史记录
location 地址信息
—hash #后面的参数
—pathname 当前路由的地址
—search 问号后面的参数
注释：补充的内容
class 编程 js路由跳转
history.push(’/login’);