react-router-dom@5.0.0

小陈和代码的爱恨情仇

已于 2022-09-24 22:24:23 修改

阅读量323

点赞数 1

分类专栏： react 文章标签： react.js javascript 前端

于 2022-09-16 21:57:50 首次发布

本文链接：https://blog.csdn.net/cgh508802602/article/details/126897550

版权

react 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1：路由原理-router

    <button onclick="goToSet()">点击去set</button>
    <button onclick="goToHome()">点击去home</button>
    <button onclick="goBack()">返回</button>

//hash

 function goToSet(){
            location.hash = "red";
        }
        function goToHome(){
            location.hash= "yellow";
        }
        function goBack(){
            history.go(-1);
        }

        // onhashchange：当地址栏hash变化时触发；
        window.onhashchange = function(event){
            console.log(event);
            console.log(location);
            // 
            const hash = location.hash.slice(1);
            // 
            document.body.style.backgroundColor = hash;
        }
        // hash 特点： # 
        // 利用location对象，通过监听onhashchange 事件，实现路由切换和匹配

        function goBack() {
            history.go(-1);
        }

        function goToSet() {
            //
            history.pushState({
                color: "red"
            }, "red", "red");
            document.body.style.backgroundColor = "red";
        }

        function goToHome() {
            history.pushState({
                color: "yellow"
            }, "yellow", "yellow");
            document.body.style.backgroundColor = "yellow";
        }

        // pushstate后，前进forward后退back时，可以触发
        window.onpopstate = function (event) {
            console.log(event);
            document.body.style.backgroundColor = event.state.color;
        }
        // 路由原理：通过监听事件，利用history对象中api 实现浏览器中 path的变化

2：写一个简单的：通过状态来改变路由显示

import React, { useEffect,useState } from 'react'

import About from "./About";
import Home from './Home'
import Inbox from './Inbox';

export default function App() {
  let [route,setRoute] = useState(window.location.hash.substr(1))
  
  useEffect(() => {
    window.addEventListener('hashchange', () => {
      setRoute( window.location.hash.substr(1));
    })
  })

  let Child
  switch (route) {
    case '/about': Child = About; break;
    case '/inbox': Child = Inbox; break;
    default: Child = Home;
  }
  return (
    <div>
      <h1>App</h1>
      <ul>
        <li><a href="#/about">About</a></li>
        <li><a href="#/Home">Home</a></li>
      </ul>
      <Child />
    </div>)
}

3：路由基本使用

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter,HashRouter } from "react-router-dom";
const root = ReactDOM.createRoot(document.getElementById('root'));
//两种模式 ： HashRouter  和 BrowserRouter
let Router = BrowserRouter ;
root.render(
    // 如果使用hash路由模式。请用<HashRouter>组件
 
    <Router>
      <App />
    </Router>
);

import React from 'react'
import { Link, HashRouter,BrowserRouter, Route,Router } from "react-router-dom";

import About from "./pages/About";
import Home from './pages/Home';
export default function App() {
  return (
    <div>
      <h1>App</h1>
        <ul>
          {/* Link 作用：更改url中中路由地址变化(path) */}
          <li><Link to="/about">About</Link></li>
          <li><Link to="/Home">Home</Link></li>
        </ul>
        <div>
          {/* 
            Route 注册路由组件
            path 作用：告诉Route 哪一个path地址，可以配置到当前注册的路由组件
            component 作用：将普通的组件，注册为路由组件。
            我们认为路由组件属于页面组件
          */}
          <Route path={'/about'} component={About} />
          <Route path={'/Home'} component={Home} />

        </div>
    </div>
  )
}

4:路由组件_普通组件

# 路由组件和一般组件

1.写法不同：
   - 普通组件：<component />
   - 路由组件：<Route path="" component={component} />
2.开发者规范中，存放路径不同
   - 普通组件：components/xxx
   - 路由组件：pages/xxx
3.找bug方式不同：
   - 普通组件：
      - 1：导入组件路径对不对
      - 2：介绍践变量名字单词是否大写
   - 路由组件：
      - 1: 看url中路由地址
      - 2: 看注册的path与 url的路由地址是否一致
      - 3: 看component属性注册的组件对不对
4.props接收的值不同:
   - 普通组件: 自定义属性传值
   - 路由组件: 注册并渲染会自动传值
      - history
      - location
      - match
      - 记录路由地址详情详细,或者提供修改路由地址方法

5：NavLink_路由高亮

# 路由高亮显示

>更具<NavLink /> 组件特点实现高亮显示

方式一：
- 通过设置选中路由的class类名为 `router-active'` 在通过css设置`router-active` 样式实现高亮显示

code :
~~~App.jsx
<NavLink activeClassName='router-active' to="/Home">Home</NavLink>
~~~
~~~css
.router-active{
    color: #f9f9f9;
    background-color: blueviolet;   
 }
~~~

方式二：
- 通过`activeStyle` 给选中路由设置高亮样式

~~~jsx
<NavLink activeStyle={{
            fontWeight: 'bold',
            color: 'red'
          }} to="/about">About</NavLink>
~~~

import React from 'react'
import { NavLink, Route } from "react-router-dom";
import './App.scss'

import About from "./pages/About";
import Home from './pages/Home';
export default function App() {
  return (
    <div>
      <h1>App</h1>
      <main>
        <ul className='nav'>
          {/* 
          1 NavLink 链接标签，作用：更改url中path
          2 编译后为a标签。当前选中 链接 会有 class=“active'
          3 activeClassName 更改默认选中的类名
          4 用途：实现路由的高亮显示
          5:activeStyle 对象， 作用：给选中路由单独设置样式
          */}
          <li><NavLink activeStyle={{
            fontWeight: 'bold',
            color: 'red'
          }} activeClassName='router-active' to="/about">About</NavLink></li>
          <li><NavLink activeClassName='router-active' to="/Home">Home</NavLink></li>

        </ul>
        <div id='content'>
          {/* 
            Route 注册路由组件
            path 作用：告诉Route 哪一个path地址，可以配置到当前注册的路由组件
            component 作用：将普通的组件，注册为路由组件。
            我们认为路由组件属于页面组件
            
          */}
          <Route path={'/about'} component={About} />
          <Route path={'/Home'} component={Home} />

        </div>
      </main>

    </div>
  )
}

6:路由匹配模式

# 路由匹配模式

> 指的是url中路由地址，选中react中哪些组件？
> - 链接组件 (路由高亮匹配)
> - 路由组件 (路由渲染的匹配)

**两种模式**
- 精准匹配（exact）
   - > 必须式某个地址`/path` 才能匹配成功
- 模糊匹配（默认）
   - > 一某个地址 为开头的配置规则 `/^\/path*/`


## 路由高亮的匹配

>NavLink

之前哪一个`NavLink` 被激活了。然后添加class类名，

- 1：activeClass 修改默认 class类名
- 2：给class设置样式

**精准匹配**

~~~js
 <NavLink exact />
~~~

## 路由展示匹配

>Route 

> 让url中path地址，与 Route 中path属性比较，匹配到Route后，在看componet 注册哪个组件，然后渲染的是注册的路由组件

**精准匹配：**

~~~js
 <Route exact />
~~~



**example：** 
~~~
1:如果 /home 可以匹配到  home组件
/home        ---匹配--> home组件
/home/a/v    ---匹配--> home组件
/a/home/b    ---不能匹配到-->home组件
~~~

## 路由找bug思路：

样式错误：
- 1：看浏览器编译后的代码，解析的html css 
- 2: 看浏览器的`/path` 与 `NavLink`的to的赋值，是否存在，
- 3：activeClass 赋值，在css中是否存**有效的选择器样式**

以上都没有问题：`看看是不是浏览器在解析时候丢失了样式文件。`

渲染错误：

- 一看，url的path
- 二看：Route 的 path，与url的path是否一致？
- 三看：Route 中componet注册组件是否存在？

import React from 'react'
import { NavLink, Route } from "react-router-dom";
import './App.scss'

import About from "./pages/About";
import Home from './pages/Home';
import A from './pages/A';


export default function App() {
  return (
    <div>
      <h1>App</h1>
      <main>
        <ul className='nav'>
          {/* 
          1 NavLink 链接标签，作用：更改url中paht
          2 编译后为a标签。当前选中 链接 会有 class=“active'
          3 activeClassName 更改默认选中的类名
          4 用途：实现路由的高亮显示
          5:activeStyle 对象， 作用：给选中路由单独设置样式
          */}
          <li><NavLink activeStyle={{
            fontWeight: 'bold',
            color: 'red'
          }} activeClassName='router-active' to="/about">About</NavLink></li>
          {/* 
          exact 告诉react-router 只有只有路由地址为 /Home 才能添加class='router-active'
          */}
          <li><NavLink activeClassName='router-active' exact to="/Home">Home</NavLink></li>
          {/* 
          只要以为/Home/a/* 开头的地址，都可以添加class='router-active'
          */}
          <li><NavLink activeClassName='router-active'  to="/Home/a">ABC</NavLink></li>
          <li><NavLink activeClassName='router-active' to="/Home/a/b">DAFSD</NavLink></li>
          <li><NavLink activeClassName='router-active' to="/A/Home/B">DAFSD</NavLink></li>

        </ul>
        <div id='content'>
          {/* 
          1：path 根据 url 中路由地址 匹配路由组件。渲染
          2：默认匹配规则：模糊匹配： 
            /about 只要路由地址为 /about开头 /about /about/a/b 都可以匹配About组件，渲染
            /Home 只要以/home开头 /home /home/a 都可以匹配Home 并渲染home
          */}
          <Route path={'/about'} component={About} />
          {/* 
          exact 只有地址为/home的组件才能匹配到
          */}
          <Route exact path={'/Home'} component={Home} />
          <Route  path={'/Home/a'} component={A} />

        </div>
      </main>

    </div>
  )
}

7:Switch 在多个匹配结果中，渲染第一个Route

# Switch

注意：最新版本的 react-router@6 已经删除了

>Switch  在多个匹配结果中，渲染第一个Route 

案例：看 app.jsx 
通过注释Switch方式测试。

import React from 'react'
import './App.scss'
import { NavLink, Route, Switch } from 'react-router-dom'
import About from './pages/About'
import Home from './pages/Home';
import A from './pages/A';


export default function App() {
  return (
    <div>
      <h1>App</h1>
      <main>
        <ul className='nav'>
          <li>
            <NavLink activeClassName='router-active' to={'/about'}>about</NavLink>
          </li>
          <li>
            <NavLink activeClassName='router-active' to={'/home'}>home</NavLink>
          </li>
          <li>
            <NavLink activeClassName='router-active' to={'/home/a'}>AAA</NavLink>
          </li>
        </ul>
        <div id='content'>
          {/*
          Switch  在多个匹配结果中，渲染第一个Route 

          Route 渲染的循序与书写顺序油感
          1：看匹配；多个
          2：先渲染辈分高的，同辈分，按照书写顺序加载
          */}
          <Switch>
            <Route path={'/about'} component={About} />
            {/* 
            /home/a  匹配到  Home A 
            没有switch 两个都渲染
            有 switch 只渲染Home
            */}
            <Route path={'/home/a'} component={A} />
            <Route path={'/home'} component={Home} />
          </Switch>
        </div>
      </main>

    </div>
  )
}

8:Redirect 路由重定向。

# Redirict

> 作用：路由重定向

## 属性
- from  作用：监听url中path（默认模糊匹配），告诉Redirect 是否重定向。
- to   作用：重定向地址
   - 类型 string|obj
- exact 精准匹配，约束from


## 触发条件
- 1：path没有匹配到Route
- 2: 满足from赋值匹配条件
- 3：必须在Route后面写。

example
~~~js
// 当url中patch没有匹配的Route，并且地址【必须是 /】 触发重定向
<Redirect exact from='/' to={'/home'}/>
// 当url中patch没有匹配的Route，并且地址【以 /aaa开头】， 触发重定向
<Redirect from='/aaa' to={'/about'}/>

// 不论什么地址，都没有渲染的Route 
<Redirect to={'/404'} />
~~~

### 必须在Route后面写

- 1：path 匹配 Route 有渲染，
- 2：没有，看看有没有Redirect，是都满足触发条件 
- 3：满足 触发Redirect --->更改url的path 地址-->匹配Route ---> 渲染Route

import React from 'react'
import './App.scss'
import { NavLink, Route, Switch, Redirect } from 'react-router-dom'
import About from './pages/About'
import Home from './pages/Home';
import A from './pages/A';
import UrlErr from './pages/404'


export default function App() {
  return (
    <div>
      <h1>App</h1>
      <main>
        <ul className='nav'>
          <li>
            <NavLink activeClassName='router-active' to={'/about'}>about</NavLink>
          </li>
          <li>
            <NavLink activeClassName='router-active' to={'/home'}>home</NavLink>
          </li>
          <li>
            <NavLink activeClassName='router-active' to={'/home/a'}>AAA</NavLink>
          </li>
          <li>
            <NavLink activeClassName='router-active' to={'/dddd'}>404</NavLink>
          </li>
          <li>
            <NavLink activeClassName='router-active' to={'/aaa'}>点我链接到其他地方</NavLink>
          </li>


        </ul>
        <div id='content'>

          {/*
          Switch  在多个匹配结果中，渲染第一个Route 

          Route 渲染的循序与书写顺序油感
          1：看匹配；多个
          2：先渲染辈分高的，同辈分，按照书写顺序加载
          */}
          <Switch>
            <Route path={'/about'} component={About} />
            {/* 
            /home/a  匹配到  Home A 
            没有switch 两个都渲染
            有 switch 只渲染Home
            */}
            <Route path={'/home/a'} component={A} />
            <Route path={'/home'} component={Home} />
            <Route path={'/404'} component={UrlErr} />

            {/*
            Redirect 

            应用：设置默认首页路由地址
      
            */}
            <Redirect exact from='/' to={'/home'}/>
            <Redirect from='/aaa' to={'/about'}/>

            {/* 
             Redirect 路由重定向。
             1：检测url中path是否可以匹配的Route
               - 如果可以 不触发Redirect
               - 没有匹配到，触发Redirect 更改url中path地址
               - 重新匹配Route，渲染匹配到Route 
              注意：书写位置，可以在任意地方使用组件,有bug 
                 建议放在最后一个Route下面 
              404 是兜底操作。   
            */}
            <Redirect to={'/404'} />
          </Switch>
        </div>
      </main>

    </div>
  )
}

9：嵌套路由

# 嵌套路由

> 一级路由下面还有二级路由或者三级路由

## 思路

第一步：分析二级路由在哪个路由页面下？
第二步：当前页面的页面结构：
   - 哪些是导航
   - 哪些根据路由地址变化，动态展示内容。
第三步：根据页面分析，编写代码
   - 在当前页面组件中，导入 `react-router-dom`
   - 编写导航
   - 注册页面组件 （将二级页面放在一级页面的路径下）

## 为什么在一级路由地址上编写二级路由地址？   

example
> /home   /home/info ---> why 不能写 /info

> 因为二级路由，必须要先加载一级路由渲染的组件，才能有再次匹配二级路由组件


/info

二级路由要想展示，必须先展示  home
要想展示 Home 浏览器地址必须是以/home开头

问：/info 能加载 Home ?
   不能
   Home 没渲染能展示二级路由吗？
   不能
   二级路由没展示，能匹配到子路由吗？
   不能

10：params参数 -- 传参

import React from 'react'

export default function Item(props) {
    console.log(props);
    let {id,title} = props.match.params;
    return (
        <div>
            <p>id: {id}</p>
            <p>title:{title}</p>
        </div>
    )
}


~~~
params 参数样子
http://localhost:3000/home/info/1
http://localhost:3000/home/info/2

query 参数样子
http://localhost:3000/home/info?id=1
http://localhost:3000/home/info?id=2
~~~

ajax :

~~~
url
  params
  query
body
  json
  urlencode
  xml
  formData 
  ...
~~~

## 参数

- params
  - 参数结构 `/home/list/1`
  - 1: 在`Route` 定义params参数的·`key`，语法`/hoem/list/:id/:title`
  - 2：在`NavLink Link` 中给params参数`赋值` 语法 `/home/list/1/测试`
  - 3：在渲染的`路由组件中` 通过 `props.match.params` 获取pramas参数
- serch

- state

11：search传参 --

import React from 'react'

export default function Item(props) {
    console.log(props);
    // parmas 参数
    // let {id,title} = props.match.params;

    // query参数
    let query = props.location.search;
    query = qs(query)
    console.log(query);
    let {id,title} = query;
    return (
        <div>
            <p>id: {id}</p>
            <p>title:{title}</p>
        </div>
    )
}


function qs(str){
    let res = {};
    str = str.slice(1);
    let arr = str.split('&');
    for(let i in arr){
        let index = arr[i].indexOf('=');
        let k = arr[i].slice(0,index);
        let v = arr[i].slice(index+1);
        res[k] = v
    }
    return res
}

## 参数

- params
  - 参数结构 `/home/list/1`
  - 1: 在`Route` 定义params参数的·`key`，语法`/hoem/list/:id/:title`
  - 2：在`NavLink Link` 中给params参数`赋值` 语法 `/home/list/1/测试`
  - 3：在渲染的`路由组件中` 通过 `props.match.params` 获取pramas参数
- searrch
  - 结果 `/home/list?id=1&title=测试`
  - 1: 在`NavLink Link` 中给params参数`赋值` 语法 `/home/list?id=1&title=测试`
  - 2: 在渲染的`路由组件中` 通过 `props.location.search` 获取search,
  - 3: 将参数字符变为对象,在渲染参数.
 - state

12:state 传参 -

---------state传参

import React from 'react'
// queryString

export default function Item(props) {
    console.log(props);
    // parmas 参数
    // let {id,title} = props.match.params;

    // query参数
    // let query = props.location.search;
    // query = qs(query)
    // console.log(query);
    // let {id,title} = query;

    // state

    let {id,title} = props.location.state || {}
    return (
        <div>
            <h1>list detal</h1>
            <p>id: {id}</p>
            <p>title:{title}</p>
        </div>
    )
}


// function qs(str){
//     let res = {};
//     str = str.slice(1);
//     let arr = str.split('&');
//     for(let i in arr){
//         let index = arr[i].indexOf('=');
//         let k = arr[i].slice(0,index);
//         let v = arr[i].slice(index+1);
//         res[k] = v
//     }
//     return res
// }

## 参数

- params
  - 参数结构 `/home/list/1`
  - 1: 在`Route` 定义params参数的·`key`，语法`/hoem/list/:id/:title`
  - 2：在`NavLink Link` 中给params参数`赋值` 语法 `/home/list/1/测试`
  - 3：在渲染的`路由组件中` 通过 `props.match.params` 获取pramas参数
- searrch
  - 结果 `/home/list?id=1&title=测试`
  - 1: 在`NavLink Link` 中给params参数`赋值` 语法 `/home/list?id=1&title=测试`
  - 2: 在渲染的`路由组件中` 通过 `props.location.search` 获取search,
  - 3: 将参数字符变为对象,在渲染参数.
 - state
  - 1: 在`NavLink Link` 中to`赋值` 对象 `{pathname,state}`
  - 2: 在渲染的`路由组件中` 通过 `props.location.state` 获取state,
  - 注意:在url中没有显示参数,他是利用浏览器中history location对象实现路由传参的
> 三个传参方式用哪个?
> - 1: 三种技术区别,各自优势,性能.
> 结论:除了写法不同,性能没有区别.用哪个无所谓.

13:编程式导航

import React from 'react'
import { NavLink, Route, Switch } from 'react-router-dom'
import Item from './Item'
export default function List(props) {
  console.log(props);
  let list = [
    {
      id: 1,
      text: '列表一'
    }, {
      id: 2,
      text: '列表二'
    }, {
      id: 3,
      text: '列表三'
    },
  ]
  const linkAbout = ()=>{
    // js 方式更改url中路由地址.

    // 注意:历史浏览器记录用 栈(数组)数据结构保存
    // 原理:相当于往历史浏览记录数组中 添加一个地址,可以返回上一页
    props.history.push('/about')
    // 原理: 相当于历史浏览记录,替换当前展示地址. 不能返回上一页
    // props.history.replace('/about')
  }

  const toParams =(path)=>{
    props.history.push(path)

  }
  const toSearch =(path)=>{
    props.history.push(path)

  }
  const toState =(path,state)=>{
    props.history.push(path,state)

  }
  return (
    <div className='List'>
      <ul>
        {
          list.map(item => {
            return (
              <li key={item.id}>
                {/* parms 参数 */}
                {/* <NavLink to={`/home/list/${item.id}/${item.text}`}>{item.text}</NavLink> */}
                {/* search */}
                {/* <NavLink to={`/home/list?id=${item.id}&title=${item.text}`}>{item.text}</NavLink> */}
                {/* 
                pathname 更改url中路由地址是什么 
                state    传递state参数
                */}
                <NavLink to={{ pathname: '/home/list', state: { id: item.id, title: item.text } }}>{item.text}</NavLink>
                <button onClick={()=>toParams('/home/list/'+item.id+'/'+item.text)}>paranms</button>
                <button onClick={()=>toSearch(`/home/list?id=${item.id}&title=${item.text}`)}>search</button>
                <button onClick={()=>toState('/home/list',{id:item.id,title:item.text})}>state</button>
              </li>
            )
          })
        }
        <li>
          <button onClick={()=>{linkAbout()}}>点击按钮更改地址为 /about</button>
        </li>
      </ul>
      <div>
        <Switch>
          {/* params参数怒 */}
          {/* <Route path={'/home/list/:id/:title'} component={Item}></Route> */}

          {/* <Route path={'/home/list'} component={Item}></Route> */}
          <Route path={'/home/list'} component={Item}></Route>


        </Switch>
      </div>
    </div>
  )
}

import React from 'react'
// queryString

export default function Item(props) {
    console.log(props);
    // parmas 参数
    // let {id,title} = props.match.params;


    // query参数
    // let query = props.location.search;
    // query = qs(query)
    // console.log(query);
    // let {id,title} = query;

    // state

    let {id,title} = props.location.state || {}
    return (
        <div>
            <h1>list detal</h1>
            <p>id: {id}</p>
            <p>title:{title}</p>
        </div>
    )
}


// function qs(str){
//     let res = {};
//     str = str.slice(1);
//     let arr = str.split('&');
//     for(let i in arr){
//         let index = arr[i].indexOf('=');
//         let k = arr[i].slice(0,index);
//         let v = arr[i].slice(index+1);
//         res[k] = v
//     }
//     return res
// }

## 编程式导航

> 在js代码中如何使用 api 修改url,或者跳湖在哪.


- props.history.push(path,state);
- props.history.replace(path,state);

历史浏览记录:底层式用数组保存的,每次变更url,默认都是给数组添一个地址

- push新增历史记录
- replace 替换url地址,历史记录数组长度不变化的


传参

~~~js
// params
props.history.push('/home/list/1');
// search
props.history.push('/home/list?id=1');

//state
props.history.push('/home/list',{id:1});

~~~

14:witchRouter

import React from 'react'
import { NavLink, Route, Switch } from 'react-router-dom'
import Item from './Item'
export default function List(props) {
  console.log(props);
  let list = [
    {
      id: 1,
      text: '列表一'
    }, {
      id: 2,
      text: '列表二'
    }, {
      id: 3,
      text: '列表三'
    },
  ]
  const linkAbout = ()=>{
    // js 方式更改url中路由地址.

    // 注意:历史浏览器记录用 栈(数组)数据结构保存
    // 原理:相当于往历史浏览记录数组中 添加一个地址,可以返回上一页
    props.history.push('/about')
    // 原理: 相当于历史浏览记录,替换当前展示地址. 不能返回上一页
    // props.history.replace('/about')
  }

  const toParams =(path)=>{
    props.history.push(path)

  }
  const toSearch =(path)=>{
    props.history.push(path)

  }
  const toState =(path,state)=>{
    props.history.push(path,state)

  }
  return (
    <div className='List'>
      <ul>
        {
          list.map(item => {
            return (
              <li key={item.id}>
                {/* parms 参数 */}
                {/* <NavLink to={`/home/list/${item.id}/${item.text}`}>{item.text}</NavLink> */}
                {/* search */}
                {/* <NavLink to={`/home/list?id=${item.id}&title=${item.text}`}>{item.text}</NavLink> */}
                {/* 
                pathname 更改url中路由地址是什么 
                state    传递state参数
                */}
                <NavLink to={{ pathname: '/home/list', state: { id: item.id, title: item.text } }}>{item.text}</NavLink>
                <button onClick={()=>toParams('/home/list/'+item.id+'/'+item.text)}>paranms</button>
                <button onClick={()=>toSearch(`/home/list?id=${item.id}&title=${item.text}`)}>search</button>
                <button onClick={()=>toState('/home/list',{id:item.id,title:item.text})}>state</button>
              </li>
            )
          })
        }
        <li>
          <button onClick={()=>{linkAbout()}}>点击按钮更改地址为 /about</button>
        </li>
      </ul>
      <div>
        <Switch>
          {/* params参数怒 */}
          {/* <Route path={'/home/list/:id/:title'} component={Item}></Route> */}

          {/* <Route path={'/home/list'} component={Item}></Route> */}
          <Route path={'/home/list'} component={Item}></Route>


        </Switch>
      </div>
    </div>
  )
}

import React from 'react'
// queryString

export default function Item(props) {
    console.log(props);
    // parmas 参数
    // let {id,title} = props.match.params;


    // query参数
    // let query = props.location.search;
    // query = qs(query)
    // console.log(query);
    // let {id,title} = query;

    // state

    let {id,title} = props.location.state || {}
    return (
        <div>
            <h1>list detal</h1>
            <p>id: {id}</p>
            <p>title:{title}</p>
        </div>
    )
}


// function qs(str){
//     let res = {};
//     str = str.slice(1);
//     let arr = str.split('&');
//     for(let i in arr){
//         let index = arr[i].indexOf('=');
//         let k = arr[i].slice(0,index);
//         let v = arr[i].slice(index+1);
//         res[k] = v
//     }
//     return res
// }

# withRouter
> 作用:让非路由组件可以实现路由跳转,给普通传入路由的props
> 是:高阶函数

~~~js
import { withRouter } from 'react-router-dom'

 function Head(props) {
    const back = ()=>{
        props.history.go(-1)
    }
    return (
        <div>
            <h1>App</h1>
            <button onClick={()=>{back()}}>返回</button>
        </div>
    )
}


export default withRouter(Head)
~~~

路由总结

# react-router-notes

## react路由只做两件事

- 1：更改url中路由地址path
- 2：注册路由组件，根据path,匹配注册路由组件，并渲染到页面上

使用的注意事项
- 1: 将路由组件作为 <Router /> 的子组件
- 2: <Router> 又有  
    - <BrowserRouter> 为history模式的路由
    - <HashRouter>    为hash模式的组件

## 路由开发基本思路是什么？
- 1：确定页面导航部分。作用：更改路由地址变化 `path`
> <Link />  编写导航 
- 2: 展示区域展示的内容。
> path 匹配大的路由组件。
> <Route /> 注册路由组件。
- 3：<APP /> 外围需要包裹 <BrowserRouter /> 或者 < HashRouter/>

bug:
- 当url中path地址与注册路由组件path不一致，问 **该路由组件是否会展示？**
- **当一个页面，预期需要展示的内容没有展示？你应该如何排错？**
  - 1：一看 url 中 `path`
  - 2：二看 Route 中 `path` 是否与url一致 
  - 3：三看 Route 中 `component`注册组件是不是不对

## 路由组件和一般组件区别
1.写法不同：
   - 普通组件：<component />
   - 路由组件：<Route path="" component={component} />
2.开发者规范中，存放路径不同
   - 普通组件：components/xxx
   - 路由组件：pages/xxx
3.找bug方式不同：
   - 普通组件：
      - 1：导入组件路径对不对
      - 2：介绍践变量名字单词是否大写
   - 路由组件：
      - 1: 看url中路由地址
      - 2: 看注册的path与 url的路由地址是否一致
      - 3: 看component属性注册的组件对不对
4.props接收的值不同:
   - 普通组件: 自定义属性传值
   - 路由组件: 注册并渲染会自动传值
      - history
      - location
      - match
      - 记录路由地址详情详细,或者提供修改路由地址方法

## NavLink和封装MyNavLink

## 路由导航高亮显示

>被激活的会有class 类名
>被激活的路由，指的是当前选中或者式匹配到的路由。
>默认：模糊匹配，可以陪陪到一个或者多个NavLink
- 1：通过`NavLink`中`activeClass`属性更改class类名
- 2：给 class 设置高亮样式

## 路由匹配：严or模糊
          {/* /Home/* */}
          <li><NavLink activeClassName='router-active' to="/Home/a/b">ABC</NavLink></li>
          <li><NavLink activeClassName='router-active' to="/a/Home/b">ABC</NavLink></li>

## 路由样式丢失问题提


## 嵌套路由

## 路由传参

### - params


### - search


### - state 

## 路由跳转

## 编程式导航


## 普通组件如何实现路由跳转

未写完：我会很块更新完