react-router 跳转原理及用法

1. 为什么使用react-router

当需要页面切换而又不想重新加载新页面的时候，就需要用到路由。同时还可以增强组织资源的语义，每个页面的业务功能都是高内聚，低耦合的，通过 url 就可以将页面进行很好的隔离。

2. react-router的基本原理

一句话：实现URL与UI界面的同步。

其中在react-router中，URL对应 Location 对象，而UI是由 react  component 来决定的，这样就转变成 location与 components之间的同步问题。

注：传统服务端路由一旦定义好了，就是一个配置文件，是静态的放在那里，但是对于 React Router 来说它是动态路由，因为只有当页面 render 的时候，路由才会被解析。

3.组件层面描述实现过程

在react-router中最主要的component是Router RouterContext Link，history库起到了中间桥梁的作用。

4. 关键API

<Link> 普通连接，不会触发浏览器刷新，页面变化是通过 React - Router 来控制的。

<NavLink> 类似 Link 但是会添加当前选中状态（蓝色的链接状态）。

<Prompt> 满足条件时提示用户是否离开当前页面。

<Redirect> 重定向当前页面，例如登录判断。

<Route> 路由配置的核心标记，路由匹配时显示对应组件（且只要路由匹配，组件都会显示）

<Switch> 只显示第一个匹配的路由。

5. react-router使用下的优点：

• 简单: 不需要手工维护路由state，使代码变得简单

• 强大: 强大的路由管理机制，体现在如下方面

  • 路由配置: 可以通过组件、配置对象来进行路由的配置

  • 路由切换: 可以通过<Link> Redirect进行路由的切换

  • 路由加载: 可以同步记载，也可以异步加载，这样就可以实现按需加载

• 使用方式: 不仅可以在浏览器端的使用，而且可以在服务器端的使用

6. 动态路由的简单使用

1）导入路由库

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

2）路由路径，子组件的也需要都现在根路由的地方

< Router>

      <Switch> 
            <Route exact path="/"
                   render={() => (<Redirect to="/EarlyWarnQuery" />)}   //重定向到首页面
             />

            <Route path={'/EarlyWarnQuery'} component={(EarlyWarnQuery)} />

                // component 可以是任何组件，跨文件夹也可以，只要路径写的对
            <Route path={'/Fretail'}  component={FileQuery} />
      </Switch>                              
</ Router>

3）哪里需要链接，写哪里

<NavLink key={item.id} to={{ pathname:`/cardDetail/${item.id}`, state: item  }}>
         <span onClick={this.cardShow} >张三三</span>
  </NavLink>

//   `/cardDetail/${item.id}` 带参路由         state: item  是传给子组件的参    

4）子组件接受传参，赋值给当前组件的 state

function CardDetail(props) {
    let info = props.location.state ? props.location.state : props.getCardInfo;

}

注意：

   1. 重定向

        react-router4的文档用的是BrowserRouter，BroswerRouter是需要服务端配合的，服务端重定向到首页

     2. 最外层路由只能有一个子元素     

< Router>
   <div>

      <Switch>   
            <Route exact path="/"
               render={() => (<Redirect to="/EarlyWarnQuery" />)}   //重定向到首页面
             />

             <Route path={'/EarlyWarnQuery'} component={connect(mapStateToProps)(EarlyWarnQuery)} />
                            
            <Route path={'/Fretail'}  component={FileQuery} />
      </Switch>
   </div>                        
</ Router>

参考资料：

react-router的实现原理_tangzhl的博客-CSDN博客_react router原理

React Router，组长的工作_不见浅诗～的博客-CSDN博客

使用React-Router遇到的那些坑 - ErduYang - 博客园