在react-router 4.0以及之后的版本,使用react-router都只需要引用一个react-router-dom即可。
使用方法:
root.js
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import Team1 from './components/Team1/team1'; import Team2 from './components/Team2/team2'; import { Route,HashRouter} from 'react-router-dom'; import registerServiceWorker from './registerServiceWorker'; export default class Root extends React.Component { render() { return( <HashRouter> <App> <Route path="/team1" component={Team1}></Route> <Route path="/team2" component={Team2}></Route> </App> </HashRouter> ) } } ReactDOM.render(<Root />,document.getElementById('root')); registerServiceWorker();
App.js:
import { Link } from 'react-router-dom'; class App extends Component { render(){ return( <ul> <li><Link to="/Manager">Team 1</Link></li> <li><Link to="/Team1">Team 1</Link></li> <li><Link to="/Team2">Team 1</Link></li> </ul> <div class="content"> {this.props.children} </div> ) } } export default App
Team1.js:
import React,{ Component } from 'react'; class Team1 extends Component { render() { return ( <h1>Team1</h1> ) } } export default Team1;
Team2.js:
import React,{ Component } from 'react'; class Team2 extends Component { render() { return ( <h1>Team2</h1> ) } } export default Team2;