react的路由配置

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();