React-router（1）基础用法

怼烎@ 2022-05-30 04:07 147阅读 0赞

### 0、参考文献 ###

[React Router 4 简易入门][React Router 4]

[一个中文文档，但不确定是否是官方的，例子比较多][Link 1]

[初探 React Router 4.0][React Router 4.0] 这个对标签的说明比较详细

[react-router v4 如何静态传值给子组件][react-router v4]

[render和component的区别][render_component]

### 0.1、React-router 安装 ###

> 这里的版本号是 “react-router-dom”: “^4.2.2”

安装（不需要安装 react-router，直接安装 react-router-dom 就可以了）

npm install --save react-router-dom

> 下面这几行引自[https://www.jianshu.com/p/e3adc9b5f75c][React Router 4.0]

*  react-router React Router 核心
 *  react-router-dom 用于 DOM 绑定的 React Router
 *  react-router-native 用于 React Native 的 React Router
 *  react-router-redux React Router 和 Redux 的集成
 *  react-router-config 静态路由配置的小助手

### 1、基本DEMO ###

[DEMO地址][DEMO]

> 参考 1.baseDemo.js

首先引入对应的模块

import {
        HashRouter as Router,
        Route,
        Link
    } from 'react-router-dom'

这三个都是标签名。

1.  Router 表示路由包裹标签，另外2个应该放在这个标签里；
2.  Link 表示导航标签，就是说点击这个后，会将 url 进行切换；
3.  Route 表示模块标签，当当前的 url 符合 Route 标签的设置时，会将该标签显示出来；

基本示例：

import React from "react";
    import {
        HashRouter as Router,
        Route,
        Link
    } from 'react-router-dom'
    
    const First = () => <div>第一个示例的第【1】个路由，第一个路由在第一个和第二个url里都会显示，但不在第三个显示</div>
    const Second = () => <div>第一个示例的第【2】个路由，只在第二个url里显示</div>
    const Third = () => <div>第三个示例</div>
    
    class BaseDemo extends React.Component {
        render() {
            return <div>
                <h3>React-router基础示例</h3>
                <h3>路由数据被存储在 this.props.match 里，这是其中的值{JSON.stringify(this.props.match)}</h3>
                <Router>
                    <div>
                        {/* this.props.match.url 表示当前url */}
                        <li><Link to={`${this.props.match.url}/1`}>示例1</Link></li>
                        <li><Link to={`${this.props.match.url}/2`}>示例2</Link></li>
                        <li><Link to={`${this.props.match.url}/3`}>示例3</Link></li>
    
                        <Route path={`${this.props.match.url}/1`} component={First}/>
                        <Route path={`${this.props.match.url}/2`} component={First}/>
                        <Route path={`${this.props.match.url}/2`} component={Second}/>
                        <Route path={`${this.props.match.url}/3`} component={Third}/>
                    </div>
                </Router>
            </div>
        }
    }

解释：

1.  Router 标签内，只能放一个元素，一般是放一个 div 标签，然后其他标签放这个 div 标签里；
2.  Link 标签是导航标签，类似 `<a></a>` 标签，点击后会跳转 url；
3.  Route 标签是路由组件标签，当 path 属性和当前 url 相同时，会自动显示 component 属性中匹配的标签（所有匹配成功的都会显示）；

简单来说，就是 点击 Link 标签跳转 url，然后显示对应的 url 的组件。

[React Router 4]: https://segmentfault.com/a/1190000010174260
[Link 1]: http://reacttraining.cn/web/example/basic
[React Router 4.0]: https://www.jianshu.com/p/e3adc9b5f75c
[react-router v4]: https://segmentfault.com/q/1010000012262160
[render_component]: http://blog.csdn.net/aqtata/article/details/76169974
[DEMO]: https://github.com/qq20004604/react-demo/blob/master/react-router/src/1.baseDemo.js