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