react-router简单整理总结

我会带着你远行 2023-01-17 08:48 57阅读 0赞

### 文章目录 ###

*  一、react-router与react-router-dom区别
 *  二、React-router
 *   *  1.路由组件 BrowserRouter 和 HashRouter
     *  2.路径匹配组件: Route 和 Switch
     *   *  2.1Route
         *  2.2Switch
         *  2.3导航组件: Link 和 NavLink
         *  2.4 Redirect
         *  2.5 withRouter
         *  2.6编程式导航 - history 对象
         *  2.7路由过渡动画

# 一、react-router与react-router-dom区别 #

*  react-router: 实现了路由的核心功能
 *  react-router-dom: 基于react-router，加入了在浏览器运行环境下的一些功能，例如：Link组件，会渲染一个a标签，Link组件源码a标签行; BrowserRouter和HashRouter组件，前者使用pushState和popState事件构建路由，后者使用window.location.hash和hashchange事件构建路由。

从源码可以看出react-router-dom是依赖于react-router的，其中Switch、Route、Router、Redirect等组件是直接引入react-router中的

export { Switch, Route, Router, Redirect } from 'react-router'

除此之外，react-router-dom还另外新增了Link、BrowserRouter、HashRouter组件。

因此，在引入react-router-dom后不需要显性引入react-router，react-router-dom依赖react-router，npm都会将他们安装。

react-router-dom配置路由：

// App.js
    import React from 'react'
    import { NavLink, Route, HashRouter, Redirect } from 'react-router-dom'
    import Home from './Home'
    import About from './About'
    import Repos from './Repos'
    
    export default class App extends React.Component {
      render() {
        return (
          <HashRouter>
            <div>
              <ul>
                <li><NavLink to='/About' activeClassName="active">About</NavLink></li>
                <li><NavLink to='/Repos' activeClassName="active">Repos</NavLink></li>
              </ul>
              <Route exact path='/' component={Home} /> // 指定默认路由，用Redirect组件也可以实现
              <Route path='/About' component={About}></Route>
              <Route path='/Repos' component={Repos}></Route>
            </div>
          </HashRouter>
        )
      }
    }

**注意：Route组件必须由Router、HashRouter、BrowserRouter组件包裹**

# 二、React-router #

在React-router4.0的代码库中，根据使用场景包含了以下几个独立的包：

*  react-router : react-router4.0的核心代码
 *  react-router-dom : 构建网页应用，存在DOM对象场景下的核心包
 *  react-router-native : 适用于构建react-native应用
 *  react-router-config : 配置静态路由
 *  react-router-redux : 结合redux来配置路由，已废弃，不推荐使用。

所提供的API都是以组件的形式给出。

比如BrowserRouter、Router、Link、Switch等API都是以组件的形式来使用。

## 1.路由组件 BrowserRouter 和 HashRouter ##

BrowserRouter（history模式） 和 HashRouter（hash模式）作为路由配置的最外层容器，是两种不同的模式，可根据需要选择。

history 模式：

class App extends Component {
      render() {
        return (
          <BrowserRouter>
              <Header />
              <Route path='/' exact component={Home}></Route>
              <Route path='/login' exact component={Login}></Route>
              <Route path='/detail/:id' exact component={Detail}></Route>
          </BrowserRouter>
        )
      }
    }

hash 模式：

class App extends Component {
      render() {
        return (
          <HashRouter>
              <Header />
              <Route path='/' exact component={Home}></Route>
              <Route path='/login' exact component={Login}></Route>
              <Route path='/detail/:id' exact component={Detail}></Route>
          </HashRouter>
        )
      }
    }

## 2.路径匹配组件: Route 和 Switch ##

### 2.1Route ###

Route: 用来控制路径对应显示的组件

参数：

*  path：指定路由跳转路径
 *  exact: 精确匹配路由
 *  component：路由对应的组件
    
        import About from './pages/about';
        
        ··· ···
        
        <Route path='/about' exact component={About}></Route>
 *  render： 通过写render函数返回具体的dom：
    
        <Route path='/about' exact render={() => (<div>about</div>)}></Route>
    
    render 也可以直接返回 About 组件，像下面：
    
        <Route path='/about' exact render={() => <About /> }></Route>
    
    不仅可以通过 render 方法传递 props 属性，并且可以传递自定义属性:
    
        <Route path='/about' exact render={(props) => {
            return <About {...props} name={'cedric'} />
        }}></Route>
    
    //然后，就可在 About 组件中获取 props 和 name 属性：
    
        componentDidMount() {
            console.log(this.props) 
        }
    
    render 方法也可用来进行权限认证：
    
        <Route path='/user' exact render={(props) => {
            // isLogin 从 redux 中拿到, 判断用户是否登录
            return isLogin ? <User {...props} name={'cedric'} /> : <div>请先登录</div>
        }}></Route>
 *  location: 将 与当前历史记录位置以外的位置相匹配，则此功能在路由过渡动效中非常有用
 *  sensitive：是否区分路由大小写
 *  strict: 是否配置路由后面的 ‘/’

传参：

### 2.2Switch ###

渲染与该地址匹配的第一个子节点 或者 。

类似于选项卡，只是匹配到第一个路由后，就不再继续匹配：

<Switch> 
        <Route path='/home'  component={Home}></Route>
        <Route path='/login'  component={Login}></Route> 
        <Route path='/detail'  component={detail}></Route> 
        <Redirect to="/home" from='/' /> 
    </Switch>
    
    // 类似于：
    // switch(Route.path) {
    //     case '/home':
    //         return Home
    //     case '/login':
    //         return Login
    //     ··· ···
    // }

如果像下面这样,当路由为/detail/1时，只会访问匹配组件detail, 所以需要在detail路由上加上**exact**

**注意：如果路由 Route 外部包裹 Switch 时，路由匹配到对应的组件后，就不会继续渲染其他组件了。但是如果外部不包裹 Switch 时，所有路由组件会先渲染一遍，然后选择到匹配的路由进行显示。**

### 2.3导航组件: Link 和 NavLink ###

Link 和 NavLink 都可以用来指定路由跳转，NavLink 的可选参数更多。

**Link**:

**NavLink**:  
可以看做 一个特殊版本的 Link，当它与当前 URL 匹配时，为其渲染元素添加样式属性。

### 2.4 Redirect ###

`<Redirect>` 将导航到一个新的地址。即重定向。

<Switch> 
        <Route path='/home' exact component={Home}></Route>
        <Route path='/login' exact component={Login}></Route> 
        <Redirect to="/home" from='/' exact /> 
    </Switch>
    //当访问路由‘/’时，会直接重定向到‘/home’。

是否登录：

class Center extends PureComponent {
        render() {
            const { loginStatus } = this.props;
            if (loginStatus) {
                return (
                    <div>个人中心</div>
                )
            } else {
                return <Redirect to='/login' />
            }
        }
    }

### 2.5 withRouter ###

withRouter 可以将一个非路由组件包裹为路由组件，使这个非路由组件也能访问到当前路由的match, location, history对象。

我们项目中的类组件就是这么用的

import { withRouter } from 'react-router-dom';
    
    class Detail extends Component {
        render() {
            ··· ···
        } 
    }
     
    const mapStateToProps = (state) => {
        return {
            ··· ···
        }
    }
    
    const mapDispatchToProps = (dispatch) => {
        return {
            ··· ···
        }
    }
     
    export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Detail));

### 2.6编程式导航 - history 对象 ###

一般只有通过 Route 组件渲染的组件，才能在 this.props 上找到 history 对象

如果想在路由组件的子组件中使用 history ，需要使用 withRouter 包裹

import React, { PureComponent } from 'react';
    import { withRouter } from 'react-router-dom';
    
    class 子组件 extends PureComponent {
    
        goHome = () => {
            this.props.history.push('/home')
        }
    
    
        render() {
            console.log(this.props)
            return (
                <div onClick={this.goHome}>子组件</div>
            )
        }
    }
    
    export default withRouter(子组件);

history 对象通常会具有以下属性和方法：

length - (number 类型) history 堆栈的条目数
    action - (string 类型) 当前的操作(PUSH, REPLACE, POP)
    location - (object 类型) 当前的位置。location 会具有以下属性：
    pathname - (string 类型) URL 路径
    search - (string 类型) URL 中的查询字符串
    hash - (string 类型) URL 的哈希片段
    state - (object 类型) 提供给例如使用 push(path, state) 操作将 location 放入堆栈时的特定 location 状态。只在浏览器和内存历史中可用。
    push(path, [state]) - (function 类型) 在 history 堆栈添加一个新条目
    replace(path, [state]) - (function 类型) 替换在 history 堆栈中的当前条目
    go(n) - (function 类型) 将 history 堆栈中的指针调整 n
    goBack() - (function 类型) 等同于 go(-1)
    goForward() - (function 类型) 等同于 go(1)
    block(prompt) - (function 类型) 阻止跳转。

### 2.7路由过渡动画 ###

React 提供了一个 ReactTransitionGroup 插件作为动画的底层API,和一个 ReactCSSTransitionGroup 用于轻松实现基础的CSS动画和过渡。  
[react-transition-group][]

import { TransitionGroup, CSSTransition } from "react-transition-group";
    
    class App extends Component {
    
      render() {
        return (
          <Provider store={store}>
            <Fragment> 
              <BrowserRouter>
                <div>
                  <Header />
                  
                  {/* 最外部的<Route></Route>不进行任何路由匹配，仅仅是用来传递 location */}
                  
                  <Route render={({location}) => {
                    console.log(location);
                    return (
                      <TransitionGroup>
                        <CSSTransition
                          key={location.key}
                          classNames='fade'
                          timeout={300}
                        >
                          <Switch>
                            <Redirect exact from='/' to='/home' />
                            <Route path='/home' exact component={Home}></Route>
                            <Route path='/login' exact component={Login}></Route>
                            <Route path='/write' exact component={Write}></Route>
                            <Route path='/detail/:id' exact component={Detail}></Route>
                            <Route render={() => <div>Not Found</div>} />
                          </Switch>
                        </CSSTransition>
                      </TransitionGroup>
                    )
                  }}>
                  </Route>
                </div>
              </BrowserRouter>
            </Fragment>
          </Provider>
        )
      }
    }

.fade-enter {
      opacity: 0;
      z-index: 1;
    }
    
    .fade-enter.fade-enter-active {
      opacity: 1;
      transition: opacity 300ms ease-in;
    }

参考：  
[https://segmentfault.com/a/1190000016435538][https_segmentfault.com_a_1190000016435538]  
[https://juejin.cn/post/6844904031857410062][https_juejin.cn_post_6844904031857410062]

[本文链接https://blog.csdn.net/qq\_39903567/article/details/116229555][https_blog.csdn.net_qq_39903567_article_details_116229555]

[react-transition-group]: https://chenyitian.gitbooks.io/react-docs/content/docs/10.1-animation.html
[https_segmentfault.com_a_1190000016435538]: https://segmentfault.com/a/1190000016435538
[https_juejin.cn_post_6844904031857410062]: https://juejin.cn/post/6844904031857410062
[https_blog.csdn.net_qq_39903567_article_details_116229555]: https://blog.csdn.net/qq_39903567/article/details/116229555