react-router

React-router提供了一些router的核心api，包括Router, Route, Switch等，但是它没有提供dom操作进行跳转的api。

react-router-dom

React-router-dom提供了BrowserRouter, Route, Link等api,我们可以通过dom的事件控制路由。例如点击一个按钮进行跳转，大多数情况下我们是这种情况，所以在开发过程中，我们更多是使用React-router-dom。

安装

npm install react-router-dom --save

react-router-dom存在<BrowserRouter>与<HashRouter>两种组件，当存在服务区来管理动态请求时，需要使用<BrowserRouter>组件，而<HashRouter>被用于静态网站。这里，我们选择<BrowserRouter>

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

ReactDom.render(
    <Provide store={store}>
        <BrowserRouter>
            <ul>
                <li>
                    <Link to="/">home</Link>
                </li>
                <li>
                    <Link to="/A">A</Link>
                </li>
                <li>
                    <Link to="/B">B</Link>
                </li>
            </ul>
            <Route path="/" exact component={Home}></Route>  
            <Route path="/A" component={AbortController}></Route>   
            <Route path="/B" component={B}></Route>    
        </BrowserRouter>
    </Provide>,
    document.getElementById('root')
)

match

match是在使用router之后被放入props中的一个属性，在class创建的组件中我们需要通过this.props.match来获取match之中的信息。

class Test extends React.Component{
    constructor(props){
        super(props)
    }
    render(){
        console.log(this.props)
        return <h2>测试组件</h2>
    }
}
ReactDom.render(
    <Provider store={store}>
        <BrowserRouter>
            <div>
                <ul>
                    <li>
                        <Link to="/">home</Link>
                    </li>
                    <li>
                        <Link to="/A">A</Link>
                    </li>
                    <li>
                        <Link to="/B">B</Link>
                    </li>
                </ul>
                <Route path="/:id" component={Test}></Route>
            </div>   
        </BrowserRouter>
    </Provider>,
    document.getElementById('root')
)

match中包含的信息如下。

image.png

Redirect

无论何时你要重定向到另外一个地址的时候，都可以使用Redirect组件

<Redirect to="/A"></Redirect>

Switch

只命中第一个路由