在React中使用路由的方法

添加路由模块

npm install --s react-router-dom

使用路由：

import React from 'react';
import './App.css';
import { BrowserRouter as Router, Route, NavLink  } from 'react-router-dom';
import Page1 from './components/Page1';
import Page2 from './components/Page2';
import Page3 from './components/Page3';

function App() { 
  return ( 
    <div className="App"> 
    <Router> 
      <div> 
        <ul> 
          <li> 
            <NavLink activeClassName='active' to="/page1">Page 1</NavLink > 
          </li> 
          <li> 
            <NavLink activeClassName='active' to="/page2">Page 2</NavLink > 
          </li> 
          <li> 
            <NavLink activeClassName='active' to="/page3">Page 3</NavLink > 
          </li> 
        </ul> 
        <Route  path="/page1" exact component={Page1} /> 
        <Route  path="/page2" exact component={Page2} /> 
        <Route  path="/page3" exact component={Page3} /> 
      </div> 
    </Router> 
  </div> 
  ); 
} 

export default App;

样式修饰：

ul { 
  list-style-type: none; 
  margin: 0; 
  padding: 0; 
  overflow: hidden; 
  background-color: #333; 
} 

li { 
  float: left; 
} 

li a { 
  display: block; 
  color: white; 
  text-align: center; 
  padding: 14px 16px; 
  text-decoration: none; 
} 

li a:hover:not(.active) { 
  background-color: #111; 
} 

.active { 
  background-color: #4CAF50; 
}

实际效果：