安裝Router
命令行輸入并執(zhí)行：npm install react-router react-router-dom --save
react-router: 路由的核心功能
react-router-dom:依賴react-router，加入了支持DOM的組件，例如<Link>（渲染出<a>標(biāo)簽）和<BrowserRouter>（與瀏覽器的window.history交互）
目錄結(jié)構(gòu)修改
在src目錄下新建pages文件夾，用于存放頁(yè)面入口文件；新建conponents文件夾该溯，用于存放組件相關(guān)入口文件。
pages文件夾下新建home、page1纸淮、page2、router文件夾亚享，分別在四個(gè)文件夾中新建index.js咽块。
在home、page1欺税、page2中寫入 頁(yè)面內(nèi)容
home.js
import React from "react";
export default class Home extends React.Component {
render() {
return (
<div>這是主頁(yè)面</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="/">主頁(yè)面 </Link>
<Link to="/page1">頁(yè)面1 </Link>
<Link to="/page2">頁(yè)面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")
);
運(yùn)行npm run dev啟動(dòng)應(yīng)用，
image.png
image.png
如上圖可正常切換路由即配置成功晚凿。
