create-react-app 中配置 router （v4+版本）

安装

cnpm i react-router --save

cnpm i react-router-dom --save

使用

入口文件

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';

import Routes from './routes';

import './index.css';

ReactDOM.render(
   <Routes />,
   document.getElementById('root')
);

Router配置

// src/routes.js
import React from 'react';
import { Route, BrowserRouter, Redirect, Switch } from 'react-router-dom'

import App from './App';
import Page1 from './pages/page1';
// import NotFound from './pages/NotFound/NotFound';

const Routes = (props) => (
   <BrowserRouter {...props}>
       <Switch>
           <Route exact path="/" component={App} replace />
           <Route path="/page1" component={Page1} replace />
           <Redirect to='/' />
       </Switch>
   </BrowserRouter>
);
export default Routes;

两种跳转（history.push / Link）

import React from 'react';
import logo from './logo.svg';
import { Link } from 'react-router-dom';
import './App.css';

function App(props) {
   console.log(props.history.push('/page1'))
   return (
       <div className="App">
           <header className="App-header">
               <img src={logo} className="App-logo" alt="logo" />
               <p>
                   Edit <code>src/App.js</code> and save to reload.
               </p>
               <a
                   className="App-link"
                   href="https://reactjs.org"
                   target="_blank"
                   rel="noopener noreferrer"
               >
                   Learn React
               </a>
               <Link to={{ pathname: '/page1' }}>123213123123</Link>
               <a href='/page1'>1231232</a>
           </header>
       </div>
   );
}

export default App;