react-router-dom 简单使用

项目创建完成后，需要使用 router 时，react-router-dom 提供了 router 服务

1. 下载安装 react-router-dom

npm install --save react-router-dom
或
yarn add react-router-dom

如果使用 Typescript ，需要安装一个 react-router-dom 的声明文件，vscode 会有提示
yarn add @type/react-router-dom

2. 组件引用 react-router-dom

在下载安装完毕后，就可以在组件中引入使用了
在App.js 或 App.txs 文件中引入

import { Route, Link, BrowserRouter, Redirect } from 'react-router-dom'

<Redirect to='/' /> 重定向到 Home 页

2.1 编写一级路由

import * as React from 'react'
import { Route, Link, BrowserRouter, Redirect } from 'react-router-dom'
import Home from './pages/Home'
import List from './pages/List'
import './App.css';
class App extends React.Component {

    public state = {
        // 路由数据
        routeList: [
            { path: '/', title: 'Home', exact: true, component: Home },
            { path: '/List/', title: 'List', exact: false, component: List },
        ]
    }
    render() {
        return (
            <BrowserRouter>
                {/* <Redirect to='/' /> 重定向到 Home 页 */}
                <Redirect to='/' />
                <div className='mainDiv'>
                    <div className='leftNav'>
                        {/* 遍历路由数据 */}
                        <ul>
                            {
                                this.state.routeList.map((item: any, index: number) => (
                                    <li key={index}><Link to={item.path}>{item.title}</Link></li>
                                ))
                            }
                        </ul>
                    </div>
                    <div className='rightMain'>
                        {
                            this.state.routeList.map((item: any, index: number) => (
                                <Route
                                    key={index}
                                    path={item.path}
                                    exact={item.exact}
                                    component={item.component}
                                />
                            ))
                        }
                    </div>
                </div>
            </BrowserRouter>
        )
    }
}
export default App

简单的 App 组件一级路由就完成了

这里使用遍历的方式动态渲染所有一级路由，可以方便维护

2.2 编写二级路由

大部分项目都会涉及到多级路由等路由嵌套问题，可有在一级路由的基础上，再编写二级路由
文件层级：

这里以 List.tsx 文件为二级路由文件

import React, { Component } from 'react'
import { Route, Link } from 'react-router-dom'
import Index from './List/Index';
import ReactPage from './List/ReactPage';
export default class List extends Component {
    render() {
        return (
            <div>
                <div className='topNav'>
                    <ul>
                        {/* 注意：此处路径，Link 中的 to= ，
                        和 Route 中的 path= 必须一样，
                        要么都有后缀，要么都没有，不然无法显示 */}
                        <li> <Link to='/List/Index'>Index</Link> </li>
                        <li> <Link to='/List/ReactPage.tsx'>ReactPage</Link> </li>
                    </ul>
                </div>
                <div className='videoContent'>
                    <div><h3>List function</h3></div>
                    <Route path='/List/Index' component={Index} />
                    <Route path='/List/ReactPage.tsx' component={ReactPage} />
                </div>
            </div>
        )
    }
}

注意：此处路径，Link 中的 to= ，和 Route 中的 path= 必须一样，要么都有后缀，要么都没有，不然无法显示。

当然同样也可以用遍历的形式展示

react-router-dom 完整项目：
https://github.com/Shay-Cormac/react-router