React路由react-router-dom

Myth丶恋晨 2022-02-26 12:46 279阅读 0赞

### 文档分享 ###

[react-router][]  
[react-router-dom][]  
[Ant Design of React][]  
[webpack配置React][webpack_React]  
[路由的理解][Link 1]

### React router和React-router-dom ###

##### React router #####

> React-router提供了一些router的核心api，包括Router, Route, Switch等，但是它没有提供dom操作进行跳转的api。

当我们使用它的时候可能还要手动引入加载其它资源，否则会报错，比如Location

import createBrowserHistory from 'history/lib/createBrowserHistory'

##### React-router-dom #####

> React-router-dom提供了BrowserRouter, Route, Link等api;我们可以通过dom的事件控制路由。例如点击一个按钮进行跳转，大多数情况下我们是这种情况，所以在开发过程中，我们更多是使用React-router-dom。

cnpm i react-router-dom --save

### React-router-dom的核心功能 ###

##### 先来看一个Demo #####

入口文件

// 创建组件，生命周期
    import React from 'react'
    // 操作DOM
    import ReactDom from 'react-dom'
    import App from './App.jsx'
    ReactDom.render(<App></App>,document.querySelector('#app'))

App.jsx

import React from 'react'
    import {  HashRouter, Route, Link } from 'react-router-dom'
    import About from './components/About.jsx'
    export default class App extends React.Component { 
        constructor(props){ 
            super(props)
        }
        render(){ 
            return <HashRouter>
                <Link to="/about">关于</Link>
                <Route path="/about" component={ About}></Route>
            </HashRouter>
        }
    }

**HashRouter**:表示一个路由根容器，将来所有路由相关的东西，都要包裹在里面，而一个网站中；只需要使用一次就好了。在HashRouter只能有唯一一个根元素  
**Link**:表示一个路由链接，相当于Vue的router-link  
**Route**:（1）表示一个路由规则，有两个重要的属性；path和component。其中 path 表示要匹配的路由，component 表示要展示的组件.（2）它是 一个占位符，表示将来匹配到的组件都放到这个位置， 如果想让路由规则，进行精确匹配，可以为 Route，添加 exact 属性，表示启用精确匹配模式

##### HashRouter和BrowserRouter #####

相同点:他们是两个是路由的基本，也就是路由路由根容器；只能有唯一一个根元素。两者选择其中一个即可

*  HashRouter  
    HashRouter会出现这种情况，它是通过hash值来对路由进行控制。如果你使用HashRouter，你的路由就会默认有这个\#  
    ![比如上面的Demo][Demo]  
    我们看地址，出现一个现象：就是地址栏url会出现\#
 *  BrowerRouter  
    很多情况下我们则不是这种情况，我们不需要这个\#，因为它看起来很怪，这时我们就需要用到BrowserRouter，但是有时候我们使用window.location一些值是获取不到的  
    ![看地址][20190330095714197.png]

##### Link和NavLink #####

两者都是可以控制路由跳转的，不同点是NavLink的api更多;而Link则主要是to

##### match的使用 #####

match是在使用router之后被放入props中的一个属性，在class创建的组件中我们需要通过this.props.match来获取match之中的信息。

import React from 'react'
    import {  BrowserRouter, Route, Link } from 'react-router-dom'
    // 子组件
    class Child extends React.Component{ 
        render(){ 
            return <div>获取路由地址:{ this.props.match.params.id}</div>
        }
        componentDidMount(){ 
            console.log(this)
        }
    }
    export default class App extends React.Component { 
        constructor(props){ 
            super(props)
        }
        render(){ 
            return <BrowserRouter>
                <Link to="/child">关于</Link>
                <Route path="/:id" component={ Child}></Route>
            </BrowserRouter>
        }
    }

##### Switch #####

Switch常常会用来包裹Route，它里面不能放其他元素，用来只显示一个路由。通俗来讲:使用 路由中的 Switch 组件，能够指定，如果前面的路由规则优先匹配到了，则放弃匹配后续的路由

import React from 'react'
    import {  HashRouter as Router, Route, Link,Switch } from 'react-router-dom'
    // 第一个子组件使用有状态的
    class Child1 extends React.Component{ 
        render(){ 
            return <div>获取路由地址:{ this.props.match.params.id}--
            { window.location.hash}
            </div>
        }
    }
    // 第二个子组件使用有状态的
    function Child2(){ 
        return <div>这是我的第二个子组件</div>
    }
    export default class App extends React.Component { 
        constructor(props){ 
            super(props)
        }
        render(){ 
            return <Router>
                <Link to="/child1">子组件1</Link>
                <Link to="/child2">子组件2</Link>
                <Route path="/child2" component={ Child1}></Route>
                <Route path="/:type1" component={ Child2}></Route>
            </Router>
        }
    }

![子组件的回顾][20190401104055679.png]  
这不是我们我的效果，我们只是向切换子组件而已，那么可以使用Switch进行包裹

{ /* 只要前面的匹配到了，则会放弃后面的路由规则的匹配，有些情况可以加上exact使其精准匹配 */}
                <Switch>
                <Route path="/child2" exact component={ Child1}></Route>
                <Route path="/:type1" component={ Child2}></Route>
                </Switch>

##### Redirect #####

这个不用多说是重定向，当我们进入网址后，会帮我们重定向

render(){ 
            return <Router>
                <Link to="/child1">子组件1</Link>
                <Link to="/child2">子组件2</Link>
                { /* 只要前面的匹配到了，则会放弃后面的路由规则的匹配，有些情况可以加上exact使其精准匹配 */}
                <Switch>
    tgm,            <Route path="/child1" component={ Child2}></Route>
                <Redirect to="/child2"/>
                </Switch>
            </Router>
        }

在地址栏输入：http://localhost:3009自己的本地服务器地址，最后会重定向我们给的路由：[http://localhost:3009/\#/child2][http_localhost_3009_child2]

##### withRouter #####

渲染被包裹的组件时，会更新match, location, and history。比如app.js这个页面，不是通过路由跳转过来的，而是直接从浏览器中输入地址打开的，如果不使用withRouter, 此组件的this.props为空，没法执行props中的history、location、match等方法, 如: 函数式跳转this.props.push(’/detail’)

##### push #####

以下三行代码效果一致，但是部分情况下this.props为空。可以用其它代替

window.location.replace(`#/child2`)

this.props.history.push('/child2')

### 先暂时写到这里 ###

[react-router]: https://react-guide.github.io/react-router-cn/index.html
[react-router-dom]: https://reacttraining.com/react-router/web/example/auth-workflow
[Ant Design of React]: https://ant.design/index-cn
[webpack_React]: https://blog.csdn.net/weixin_41105030/article/details/88762116
[Link 1]: https://blog.csdn.net/u013938465/article/details/78604434
[Demo]: /images/20220226/5f9ec174285e42be8daf40878c4cac5a.png
[20190330095714197.png]: /images/20220226/8b340a3f99384d9986edd9980e10a324.png
[20190401104055679.png]: /images/20220226/8eec0971503545e4a04352b75e07f0ca.png
[http_localhost_3009_child2]: http://localhost:3009/#/child2