安装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
如上图可正常切换路由即配置成功。
