类似vue中的路由它分为基本路由、嵌套路由、动态路由、编程式路由、重定向路由

使用前的准备

安装

npm i react-router-dom -S

引入

在入口文件index.js中

import { BrowserRouter as Router } from 'react-router-dom'

在渲染组件的时候需要把Router包裹着呗渲染的组件

import React from 'react'
import ReactDom from 'react-dom'
import App from './App'
ReactDom.render(<Router><App></App></Router>,document.getElementById('app'))

在需要使用路由的组件中引入Route 在Route中进行配置路由 vue是在route.js中配置通过path和component属性进行配置

使用Link进行链接类似于vue中的router-link

基本路由

在App.js

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

import Home from './Home'
import List from './List'
import User from './User'
class App extends Component{
    render(){
        return(
            <div>
                <ul>
                    <li>
                        <Link to='/'>首页面</Link>
                    </li>
                    <li>
                        <Link to='/list'>商品列表页面</Link>
                    </li>
                    <li>
                        <Link to='/list'>个人中心页面</Link>
                    </li>
                </ul>
                <h1>App</h1>
                <Route path='/' exact component={ Home }></Route>
                <Route path='/list' component={ List }></Route>
                <Route path='/user' exact component = { User }></Route>
            </div>
        )
    }
}
export default App

在上面代码中 path='/'时，如果不加上exact，那么输入/list和/user时都会匹配到/，在它们的页面上会出现/的内容

嵌套路由

在User.js中

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

import Reg from './Reg'
import Login from './Login'
class User extends Component{
    render(){
        return(
            <div>
                <Link to='/user/reg'>注册</Link>
                <Link to='/user/login'>登录</Link>
                <h2>个人中心</h2>
                <Route path='/user/reg' component={ Reg }></Route>
                <Route path='/user/login' component={ Login }></Route>
            </div>
        )
    }
}
export default User

动态路由

在list.js中

import React,{Component} from 'react'

import { Route,Link } from 'react-router-dom'
class List extends Component{
    render(){
        return(
            <div>
                <h2>列表页面</h2>
                <ul>
                    <li><Link to='/detail/1'>我是1号商品</Link></li>
                    <li><Link to='/detail/2'>我是2号商品</Link></li>
                    <li><Link to='/detail/4'>我是3号商品</Link></li>
                    <li><Link to='/detail/3'>我是4号商品</Link></li>
                </ul>
            </div>
        )
    }
}
export default List

当为每个商品添加一个动态的id时需要在定义detail路由中加上在App.js

import Detail from './Detail'
import { Route } from 'react-router-dom'
<Route path='/detail' component = { Detail }></Route>

上面的形式也可以到商品详情页面但是加上exact后就不可以跳转需要设置同样的形式

<Route path='/detail/:id' exact component = { Detail }></Route>

在detail组件中可以通过this.props.match.params.id获取到对应的id

import React,{Component} from 'react'

class Detail extends Component{
    render(){
        return(
            <h2>商品详情页面{this.props.match.params.id}</h2>
        )
    }
    componentDidMount(){
        console.log(this.props)
    }
}
export default Detail

编程式路由

编程式路由就是可以像vue中使用router.push router.go(-1)

哪里使用就在哪里写一下代码

在Detail.js

import { createBrowserHistory } from 'history'
//生成history
let history = createBrowserHistory({
    forceRefresh:true //设置强制刷新 默认为false
})

<div>
    {/* <button onClick={()=>history.go(-1)}>返回</button> */}
    {/* <button onClick={()=>history.goBack()}>返回</button> */}
    {/* 这时不会跳转 只有刷新页面后才实现跳转 */}
    {/* 可以在创建history时给它配置强制刷新就可以了 */}
    <button onClick={()=>history.push('/')}>跳转到首页面</button>
</div>

重定向路由

它的属性中包括from和to，from是本来要去的路线 to是改正后的路线

在App.js

import { Route, Link, Switch,Redirect } from 'react-router-dom'
<div>
    <Redirect from='/list' to='/'></Redirect>
    <Route path='/' exact component={Home}></Route>
    <Route path='/list' component={List}></Route>
    <Route path='/detail/:id' exact component={Detail}></Route>
</div>

使用Switch

Switch的作用是如果匹配到一个的话，下面的就不再匹配

例如匹配页面找不到的时候，不需要给它配置path属性，那么不写Switch的时候，它在正确的匹配到第一个的时候，还会继续往下匹配，这样会匹配到页面找不到的这个组件；如果加上Switch的话，它在正确匹配到第一个的时候不会再往下传，即不会匹配到页面找不到的组件

在App.js中

<Switch>
    <Redirect from='/list' to='/'></Redirect>
    <Route path='/' exact component={Home}></Route>
    <Route path='/list' component={List}></Route>
    <Route path='/detail/:id' exact component={Detail}></Route>
    <Route component={Error}></Route>
</Switch>

react中的路由