React 路由，路由跳转，路由传参，子路由（路由嵌套）详细案例

一.先了解一下前端路由

Ajax诞生以后，解决了每次用户操作都要向服务器端发起请求重新刷新整个页面的问题，但随之而来的问题是无法保存Ajax操作状态，浏览器的前进后退功能也不可用，当下流行的两种解决方法是：

1.hash，hash原本的作用是为一个很长的文档添加锚点信息，它自带不改变url刷新页面的功能，所以自然而然被用在记录Ajax操作状态中了

2.history，应该说history是主流的解决方案，浏览器的前进后退用的就是这个，它是window对象下的，以前的history提供的方法只能做页面之间的前进后退，如下：

history.go(number|URL)  //可加载历史列表中的某个具体的页面
history.forward()       //可加载历史列表中的下一个URL
history.back()          //可加载历史列表中的前一个URL

二.react路由

安装

npm i [email protected] -S //安装固定版本

yarn add react-router-dom

三.基本路由

导入路由需要的组件

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

路由组件解析

Router 总路由

link 路由导航（可以理解为 a 链接）

- - - to 切换的链接

Route 路由

- - - path 对应链接

- - - component 对应组件

简单路由完整代码(实现跳转）

import React, { Component } from 'react';
import {BrowserRouter as Router,Route,Link} from 'react-router-dom'
// 导入子组件
class App extends Component {
  render() {
    return (
      <div className="App" >    
        <Router>
            {/* 导航 */}
          <div>  
            <Link to="/">首页</Link> | <Link to="/about">关于</Link> 
          </div>
          <hr/>
            {/* 路由页面 */}
          <Route path="/" exact component={Home}></Route>
          <Route path="/about" component={About}></Route>
        </Router>  
      </div>
    );
  }
}
function Home(){
  return (<h1>我是首页</h1>);
}
function About(){
  return (<h1>我是关于</h1>);
}
export default App;

四.路由参数

1.定义指令 Link指令

<Link to="/produce/1">产品1</Link>|
<Link to="/produce/abc">产品abc</Link></div>

2.定义路由

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

3.定义组件-获取路由参数（id传参）

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

match是组件默认传递的参数，他有几个参数

1.params 路由的参数

2.isExact 是否精确匹配

3.path 路径

4.url 地址

五.子路由

这里我们使用Nalink 来代替 Link ，他比link选中的时候多一个active的class

导入Navlink

// NavLink 导航链接
// NavLink 比Link自动添加一个active的class
import {BrowserRouter as Router,Route,Link,NavLink} from 'react-router-dom'

1.定义指令NavLink指令

<NavLink to="/admin">管理页面</NavLink>|

2.定义主路由

<Route path="/admin" component={Admin}></Route>

3.编写主路由

function Admin() {
    return (<div style={
   
   { "display": "flex" }}>
        <div style={
   
   { width: '200px', "borderRight": "1px solid #f0f0f0" }}>
            <NavLink to="/admin/dash">概览</NavLink><br />
            <NavLink to="/admin/orderlist">订单</NavLink>
        </div>
        <div>
            <Route path='/admin/dash' component={Dash}></Route>
            <Route path='/admin/orderlist' component={orderlist}></Route>
        </div>
    </div>)
}

return内的内容都是呈现在Admin页面的内容，使用了jsx语法

4.编写子路由

function orderlist() {
    return (<div>
        订单列表
    </div>)
}
function Dash() {
    return (<div>
        概览
    </div>)
}

六.路由404配置与Switch

Switch能让匹配的路由唯一

1.先导入Switch

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

2.定义路由

<Switch>
  <Route path="/" exact component={Home}></Route>
  <Route path="/about" component={About}></Route>
  <Route path="/produce/:id" component={Produce}></Route>
  <Route path="/detail" component={Detail}></Route>
  <Route path="*" component={NoMatch}></Route>
</Switch>

定义404路由要写到最后

3.编写404路由

 function NoMatch({location}){
   return (<h1>页面没有找到{location.pathname}</h1>);
 }

location 当前的地址

pathname 当前的地址信息

七.重定向

我们需要写一个默认的子路由，这个时候可用重定向（进入页面后默认显示的页面）

1.导入重定向 Redirect

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

2.重新编写主路由

function Admin() {
    return (<div style={
   
   { "display": "flex" }}>
        <div style={
   
   { width: '200px', "borderRight": "1px solid #f0f0f0" }}>
            <NavLink to="/admin/dash">概览</NavLink><br />
            <NavLink to="/admin/orderlist">订单</NavLink>
        </div>
        <div>
            <Route path='/admin/dash' component={Dash}></Route>
            <Route path='/admin/orderlist' component={orderlist}></Route>
            {/* 重定向 */}
            <Redirect path="/admin" to="/admin/dash"></Redirect>
        </div>
    </div>)
}

八.组件的参数

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 问号后面的参数