1.安装依赖
npm install react-router-dom --save-dev
2.src/router/index.js
/*
Root, Router 配置
*/
import React from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';
import App from '@/App';
//开发新建的页面
import Home from '@/pages/home/home';
import Infor from '@/pages/infor/inforIndex';
const Root = () => (
<div>
<Switch>
<Route
path="/"
render={props => (
<App>
<Switch>
//可优化为动态渲染路由
<Route path="/" exact component={(props)=><Home {...props}/>} />
<Route path="/infor" component={(props)=><Infor {...props}/>}/>
<Route render={() => <Redirect to="/" />} />
</Switch>
</App>
)}
/>
</Switch>
</div>
);
export default Root;
3.src/App.js
import React, { Component } from 'react';
class App extends Component {
render() {
return <div>{this.props.children}</div>;
}
}
export default App;
4.src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
//引入路由文件
import Root from '@/routes/index';
import reportWebVitals from '@/reportWebVitals';
ReactDOM.render(
<BrowserRouter>
<Root/>//替换原来的<App/>
</BrowserRouter>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();