使用react-router-dom管理React路由

下载：

npm install react-router-dom --save

--save和--sace-dev的区别看本人的另一篇博文：

https://blog.csdn.net/qq_23521659/article/details/84501797

问：为什么不用安装react-router？

答：react-router-dom依赖react-router，所以我们使用npm安装依赖的时候，只需要安装相应环境下的库即可，不用再显式安装react-router。

基本页面管理及跳转：

这里我们有两个页面，Home和Test；

exact表示严格匹配；加了的话只有“/test”能有效跳转，不加则“/test/123”也可以跳转；

Router.js

import React, {Component} from 'react';
import {BrowserRouter, withRouter, Route, Redirect} from 'react-router-dom';

import Home from "../pages/home/Home";
import Test from "../pages/test/Test";

export default class MyRouter extends Component {
    render(){
        return(
            <BrowserRouter>
                <div>
                    <Route exact path="/" component={Home}/>
                    <Route path="/test" component={Test}/>
                </div>
            </BrowserRouter>
        )
    }
}

App.js

import React from 'react';
import './resources/css/App.css';
import Router from "./router/Router";

function App() {
    return (
        <div className="App">
            <Router/>
        </div>
    );
}

export default App;

通过点击a便签或者直接输入链接都可以直接跳转到相应页面。