React-Router 的使用总结 ?

• 什么是 React-Router ？

React-Router: 基于 React 之上的强大的 路由库，用于页面不同模块跳转。

• React-Router 的安装 ?

1. 使用 create-react-app 初始化项目。

2. 运行 npm install --save react-router 命令，安装 React-Router-dom 。

• React-Router 的基本使用 ?  【完整代码链接】

import React, { Component } from 'react'
// 用到 React-Router 相关组件的加载导入
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
// 导入组件
import List from './Components/List'
import Index from './Components/Index'

class AppRouter extends Component {
    render(){
        // <Link> 组件相当于 a 标签，其中 to 为跳转路径
        return (
            <Router>
                <ul>
                    <li><Link to="/">首页</Link></li>
                    <li><Link to="/list/">列表</Link></li>
                </ul>
                {/* Route 为通道，指定链接跳转显示的内容组件，其中 exact 属性为精准匹配 */}
                <Route path="/" exact component={Index}/>
                <Route path="/list/" component={List}/>
            </Router>
        )
    }
} 

export default AppRouter

• React-Router 动态传值 ？ 【完整代码链接】

步骤 : 1，设置规则。2，传递值。3，接收值。4，内容渲染。

import React, { Component } from 'react'
// 用到 React-Router 相关组件的加载导入
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
// 导入组件
import List from './Components/List'
import Index from './Components/Index'

class AppRouter extends Component {
    render(){
        // <Link> 组件相当于 a 标签，其中 to 为跳转路径
        return (
            <Router>
                <ul>
                    <li><Link to="/">首页</Link></li>
                    {/* 传递值 */}
                    <li><Link to="/list/123">列表</Link></li>
                </ul>
                {/* Route 为通道，指定链接跳转显示的内容组件，其中 exact 属性为精准匹配 */}
                <Route path="/" exact component={Index}/>
                {/* 设置规则 */}
                <Route path="/list/:id" component={List}/>
            </Router>
        )
    }
} 

export default AppRouter

import React, { Component } from 'react'

class List extends Component {
    constructor(props) {
        super(props);
        this.state = {
            text:'这是列表页面',
            params:''
        }
    }
    render() { 
        // 内容渲染
        return (
            <h3>
                <span
                style={{'color':'green'}}
        >{this.state.text}: 携带的参数为 ---》 {this.state.params}</span>
            </h3>
        );  
    }
    componentDidMount(){
        {/* 接收值 */}
        this.setState({
            params:this.props.match.params.id
        })
    }
}
 
export default List;

• React-Router 重定向 ？ 【完整代码链接】

React-Router 重定向：可以分为两种，标签式重定向 和 编程式重定向 。（下面实例， path='/' 时，跳转到 path='/home/' ）

import React, { Component } from 'react'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import Index from './components/Index'
import List from './components/List'
import Home from './components/Home'

class AppRouter extends Component {
    constructor(props){
        super(props)
        this.state = {
            text:'React-Router 重定向'
        }
    }
    render(){
        return (
             <div>
                <h3>{this.state.text}</h3>
                <Router>
                    <ul>
                        <li><Link to="/">首页</Link></li>
                        <li><Link to="/list/">列表</Link></li>
                    </ul>
                    <Route path="/" exact component={Index}/>
                    <Route path="/list/" component={List}/>
                    <Route path="/home/" component={Home}/>
                </Router>
             </div>
        )
    }
}

export default AppRouter

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link, Redirect } from 'react-router-dom'
import List from './List'

class Index extends Component {
    constructor(props) {
        super(props);
        this.state = {
            text: '这是首页页面',
            list: [
                {id:1, text: 'HTML'},
                {id:2, text: 'CSS'},
                {id:3, text: 'JS'},
                {id:4, text: 'VUE'},
                {id:5, text: 'REACT'}
            ]
        }
         /* 编程式重定向 */
        this.props.history.push('/home/')
    }
    render() { 
        return (
            <div>
                {/* 标签式重定向 */}
                 <Redirect to="/home/" />
                <h3 style={{'color':'red'}}>{this.state.text}</h3>
                <Router>
                    <ul>
                        {
                            this.state.list.map((item, index) => {
                                return (
                                <li key={index}><Link to={'/list/' + item.id}>{item.text}</Link></li>
                                )
                            })
                        }
                    </ul>
                    <Route path="/list/:id" exact component={List}/>
                </Router>
            </div>

        );
    }
}
 
export default Index;

• React-Router 嵌套 ?  【完整代码链接】

一级页面

import React, { Component } from 'react'
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom'
import './AppRouter.css'
import Index from './Components/Index'
import Video from './Components/Video'
import WorkPlace from './Components/WorkPlace'

class AppRouter extends Component {
    constructor(props){
        super(props)
        this.state = {
            title: 'React-Router 嵌套路由',
            main_left: 'Router-Nav',
            navList: [
                {path: '/index/', text: '博客首页', exact: false, component: Index},
                {path: '/video/', text: '视频教程', exact: false, component: Video},
                {path: '/workplace/', text: '职场技能', exact: false, component: WorkPlace}]
        }
    }

    render(){
        return (
           <div>
                <h3 className="title">
                    <span>{this.state.title}</span>
                </h3>
                <hr />
                <Router>
                <div id="container">
                    <div id="main_left">
                    <h3>{this.state.main_left}</h3>
                        
                        <ul>
                            {
                                this.state.navList.map((item,index) => {
                                    return (
                                    <li key={index}>
                                        <NavLink to={item.path} 
                                        style={{'textDecoration':'none'}}
                                         activeClassName="link"
                                        >{item.text}</NavLink>
                                    </li>
                                    )
                                })
                            }
                        </ul>
                    </div>
                    <div id="main_right">
                        <Route path="/" exact component={Index}/>
                        {
                            this.state.navList.map((item,index) => {
                                return (
                                 <Route key={index} path={item.path} exact={item.exact} component={item.component}/>
                                )
                            })
                        }
                    </div>
                </div>
                </Router>
           </div>
        )
    }
}

export default AppRouter

二级页面 

import React, { Component } from 'react';
import { Route, NavLink } from 'react-router-dom'
import ReactPage from './video1/ReactPage'
import Flutter from './video1/Flutter'
import Vue from './video1/Vue'
import '../AppRouter.css'

class Video extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [
    {path:'/video/reactpage/', text: 'React 教程', exact: false, component:  ReactPage},
    {path:'/video/flutter/', text: 'Flutter 教程',exact: false, component:  Flutter}, 
    {path:'/video/vue/', text: 'Vue 教程',exact: false, component:  Vue}]
        }
    }
    render() { 
        return (
            <div>
            <div id="header" >
                <ul>
                    {
                        this.state.list.map((item, index) => {
                            return (
                                <li key={index}>
                                    <NavLink to={item.path}
                                    style={{'textDecoration':'none'}}
                                    activeClassName="link"
                                    >{item.text}</NavLink>
                                </li>
                            )
                        })
                    }
                </ul>
            </div>
            <div id="main_body">
                <Route path="/video/" exact component={ReactPage} />
                {
                    this.state.list.map((item, index) => {
                            return (
                               <Route 
                                key={index}
                                exact={item.exact}
                                path={item.path} component={item.component} />
                            )
                        })
                }
            </div>
        </div>
        );
    }
}
 
export default Video;

三级页面 

import React, { Component } from 'react'
import { Redirect } from 'react-router-dom'

class ReactPage extends Component {
    constructor(props){
        super(props)
        this.state = {
            main_body: '我是 ReactPage 页面'
        }
    }
    render(){
        return (
        <div>
            <Redirect to="/video/reactpage/" />    
            <h3>{this.state.main_body}</h3>
        </div>
        )
    }
}

export default ReactPage