react-rouer学习

我将用尽量自己的语言进行阐述本篇文章，而不引用官方文字，以便更好让大家理解

路由

首先第一个概念，路由，那么什么是路由。
其实路由和我们前端学习的$a标签$很像就是引导你想到去的目的地。
今天我们要讲的react-router相对于a标签更加强大
因为我们可以选择页面中指定部分进行切换而不是整个页面

例如图片所示，切换只是中间的部分，好了介绍完接下来正式开始学习react-router

react-router

科普名词:
BrowserRouter 和HashRouter 有些人看到这两个名词就蒙了，这是啥？ 也可以理解成路由容器
其实这两个很简单就是两个实现方式不同的$路由$也就是上文提到的帮助我们完成跳转的路由。
他们两个区别：
BrouserRouter地址栏： http://127.0.0.1:3000/
HashRouter地址栏： http://127.0.0.1:3000/$\#$/
可以看出地址栏 hashRouter有一个$\#$ 这是一定有的，查看这个我们可以区别这两个
另外底层实现不同
BrouserRouter底层是history
HashRouter 底层是hash
Switch：用于匹配渲染对应的组件并且只有$一个$
Link：类似a标签用于跳转
Route： 根据对应的url显示应对组件
接下来看看实例

create-react-app 项目  //创建react项目
npm  install  react-router-dom --save

这里匹配三个路径 一个是 About News /（不管你url是什么都会匹配到）
例如： /about 匹配about时 此时 / 也被匹配到 所以除了index显示单个以外
其他两个链接都是显示两个组件

可以看出除了index是匹配一个 其他about和news都是匹配两个
这就是我们没有使用switch的原因
源码（注意这里没有使用switch）：

import React from 'react';
import {BrowserRouter,Route,Switch,Link} from 'react-router-dom'
import Index from "./pages";
import About from "./pages/about";
import News from "./pages/News";
function App() {
  return (
    <div className="App">
       {/* 写在BrowserRouter外的内容在任何页面都会显示 */}
        <div>Router路由示例</div>
      <BrowserRouter>
          {/* Link的作用类似A标签 */}
          <Link to={'/'}>Index</Link> <br/>
          <Link to={'/about'}>about</Link> <br/>
          <Link to={'/news'}>news</Link> <br/>
          <hr/>
          {/* 根据url显示对应的组件     */}
          <Route path={'/about'} component={About}></Route>
          <Route path={'/news'} component={News}></Route>
          {/*  默认匹配项只要访问这个网站一定会匹配此项   */}
          <Route path={'/'} component={Index}></Route>
      </BrowserRouter>
    </div>
  );
}
export default App;

使用switch 这样就体现了switch的作用

这里使用A标签进行跳转
例子：

可以看出其实没什么区别，A标签跳转有刷新页面

BrouserRouter

BrouserRouter给我们提供了四个属性

• $basename$ 字符串类型 默认根路径，匹配路由会默认加上basename这个属性
  
  
• $forceRefresh$ ： 布尔类型 切换路由时页面是否刷新
• $getUserConfirmation$ : 函数类型 当切换路由前执行的函数 很少使用
• keyLength number类型 设置路由的 location.key 的长度 具体用处还不是很清楚，如有有大佬知道请告诉我一下

children 组件 无论路由是否被匹配都会被渲染 在使用children是不能包裹在Switch里

例如：我添加一个text路由

<Route path={'/text'} children={(props)=> {
                 console.log(props)
                 return (
                     <div>
                         <h2>TextChild Component</h2>
                     </div>
                 )
             }}></Route>

可以看到无论Url现在在哪里位置都会显示

Hashrouter

与BrouwserRouter类似，但是需要注意的是，hashrouter不支持记录记录历史
同样也函数$basename、getUserConfirmation$等属性

Route

Route这是最主要的主键，根据path，渲染对应组件

• path String 匹配的Url路径
  另外渲染方式有三种
• children 之前介绍过这里不多做介绍
• render 直接渲染
• component 直接渲染组件

Render方式

<Route
                  path={'/about'}
                  render={()=>{
                      return (
                          <div>about</div>
                      )
                  }}></Route>

Redirect重定向
访问某个地址放重定向到指定页面
用于设置例如 用户乱输入地址，则直接显示首页

  <Redirect from={'/'} to={'/index'}></Redirect>

路由传参方式

通配符
Route的path后面加个 $加个斜杆和参数名$
跳转的时候把具体参数传过去

<Link to={'/news/10'}>news</Link> 

 <Route path={'/news/:newid'} component={News} ></Route>

通过this.props.match.params 获取参数

嵌套路由

主要由$useRouteMatch,useParams$ 这两个组件实现
实现主要方式：
在要嵌套的路由中使用

 let { path, url } = useRouteMatch();   //获取url和path
 然后添加Route和Switch用来匹配   匹配的path我们可以通过useRouteMatch获得 
  <Switch>
       <Route exact path={path}>
             <h3>Please select a childId.</h3>
         </Route>
         <Route path={`${path}/:childId`}>  {/* 这里需要注意我这里有传递参数 */}
             <Child />
         </Route>
     </Switch>
 

在子路由中通过 let { childId } = useParams(); 获取参数

function Child() {
    let { childId } = useParams();

    return (
        <div>
            <h3>childId ={childId}</h3>
        </div>
    );
}

完整代码复制即可运行

import React from 'react';
import {BrowserRouter, HashRouter,Route,Switch,Link,Redirect,useRouteMatch,useParams} from 'react-router-dom'
import Index from "./pages";
import News from "./pages/News";
function App() {
  return (
    <div className="App">
        <div>Router路由示例</div>
      <BrowserRouter >
          {/* Link的作用类似A标签 */}
          <Link to={'/'}>Index</Link> <br/>
          <Link to={'/about'} >about</Link> <br/>
          <Link to={'/news/10'}>news</Link> <br/>
          <hr/>
              {/* 根据url显示对应的组件     */}
              <Route path={'/about'}  component={About}></Route>
              <Route path={'/news/:newid'} component={News} ></Route>

              <Route path={'/'} component={Index}></Route>
       
      </BrowserRouter>
    </div>
  );
}
function About() {

    let { path, url } = useRouteMatch();
    return (
        <div>
            <h2>About</h2>
            <ul>
                <li>
                    <Link to={`${url}/1`}>childRoute1</Link>
                </li>
                <li>
                    <Link to={`${url}/2`}>childRoute2</Link>
                </li>
                <li>
                    <Link to={`${url}/3`}>childRoute3</Link>
                </li>
            </ul>
            <Switch>
                <Route exact path={path}>
                    <h3>Please select a childId.</h3>
                </Route>
                <Route path={`${path}/:childId`}>
                    <Child />
                </Route>
            </Switch>
        </div>
    )
}

function Child() {
    let { childId } = useParams();

    return (
        <div>
            <h3>childId ={childId}</h3>
        </div>
    );
}

export default App;

如果还如需深入请到react-router官方学习