React router 路由 入门安装

地址：https://react-router.docschina.org

react router （核心路由功能）

react-router-dom （编写将在浏览器中运行的应用程序）

react-router-native （编写React Native应用程序）

安装命令 npm install react-router-dom

可以参考基础案例进行编写 https://react-router.docschina.org/web/example/basic ；

注意：我的react项目，是把react router没有跟跳转事件在一起

import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Home from '../views/index';
import Login from '../views/login';
const NoMatch = () => (
    <div>
        <h3>
            No match for <code>{location.pathname}</code>
        </h3>
    </div>
);
class RouterHome extends Component {
    render() {
        return (
            <Router>
                <Switch>
                    <Route exact path="/" component={Home} />
                    <Route path="/login" component={Login} />
                    <Route component={NoMatch} />
                </Switch>

                {/* <Route path="/topics" component={Topics} /> */}
            </Router>
        )
    }
}
export default RouterHome

404 not match

页面不存在；在Switch的包裹下，页面不存在会走未定义path的路由，并把页面参数传入