React-router的使用

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>
        )
    }
}