1、参考文档
1)https://reacttraining.com/react-router/web/guides/quick-start
2)http://react-guide.github.io/react-router-cn/index.html
2、demo
index.jsx
import React from 'react' import ReactDOM from 'react-dom' import { BrowserRouter as Router } from 'react-router-dom' import App from './components/App.jsx' ReactDOM.render( <Router><App /></Router>, document.getElementById('root'))
App.jsx
import React from 'react' import { NavLink, Switch, Route, Redirect } from 'react-router-dom' import About from '../views/about.jsx' import Home from '../views/home.jsx' import User from '../views/user.jsx' export default class App extends React.Component { state = { user: { id: 1, name: 'zs' } } render() { const {user} = this.state return ( <div> <h3>tab切换</h3> {/* 导航链接 */} <NavLink to='/about'>About</NavLink><br/> <NavLink to='/home'>Home</NavLink><br/> <NavLink to='/user/1'>User</NavLink> <h3>组件</h3> <Switch> {/* <Route path='/about' component={About} /> <Route path='/home' component={Home} /> */} <Route path='/about'><About /></Route> <Route path='/home'><Home /></Route> <Route path='/user/:id'><User user={user}/></Route> <Redirect strict from='' to='/about' /> </Switch> </div> ) } }
User.jsx
import React from 'react' export default class User extends React.Component { render() { return ( <div> user组件 {this.props.user.id + "--" + this.props.user.name} </div> ) } }
about.jsx
import React from 'react' export default class About extends React.Component { render() { return ( <div> about组件 </div> ) } }