安装Router

命令行输入并执行：npm install react-router react-router-dom --save
react-router: 路由的核心功能
react-router-dom:依赖react-router，加入了支持DOM的组件，例如<Link>（渲染出<a>标签）和<BrowserRouter>（与浏览器的window.history交互）

目录结构修改

在src目录下新建pages文件夹，用于存放页面入口文件；新建conponents文件夹，用于存放组件相关入口文件。
pages文件夹下新建home、page1、page2、router文件夹，分别在四个文件夹中新建index.js。

在home、page1、page2中写入 页面内容
home.js

import React from "react";
export default class Home extends React.Component {
    render() {
        return (
            <div>这是主页面</div>
        )
    }
}

在router中写入路由配置

import React from 'react'
import {
    HashRouter as Router,
    Route,
    Link,
    Switch
} from 'react-router-dom';
import Home from '../home';
import Page1 from '../page1';
import Page2 from '../page2';

export default class IRouter extends React.Component {
    render() {
        return (
            <Router >
                <div>
                    <Link to="/">主页面 </Link>
                    <Link to="/page1">页面1 </Link>
                    <Link to="/page2">页面2 </Link>

                    <Switch >
                        < Route exact path="/" component={Home} />
                        < Route path="/page1" component={Page1} />
                        < Route path="/page2" component={Page2} />
                    </Switch>
                </div>
            </Router>
        );
    }
}

修改src/index.js修改根组件，引入路由配置

import React from "react";
import ReactDom from "react-dom";
import './index.less';
import IRouter from './pages/router';


ReactDom.render(
    <IRouter/>,
    document.getElementById("root")
);

运行npm run dev启动应用，

image.png

image.png