react-router基础

HelloWorld

// App.js
import React from 'react'
import { BrowserRouter,Route,Link } from 'react-router-dom'

class App extends React.Component {
    render() {
        return (
         <BrowserRouter>
             <div>
                 <ul>
                     <li>
                         <Link to="/">Home</Link>
                     </li>
                     <li>
                         <Link to="/user">User</Link>
                     </li>
                     <li>
                         <Link to="/admin">Admin</Link>
                     </li>
                 </ul>
                 /* exact 精确匹配 */
                 <Route exact path="/" component={ Home }/>
                 <Route path="/user" component={ User }/>
                 <Route path="/admin" component={ Admin }/>
             </div>
         </BrowserRouter>
        )
    }
}

function Home() {
    return (
        <div>
            <h2>我是home</h2>
        </div>
    )
}

function User() {
    return (
        <div>
            <h2>我是user</h2>
        </div>
    )
}

function Admin() {
    return (
        <div>
            <h2>我是admin</h2>
        </div>
    )
}

export default App

基础组件

BrowserRouter
Route
Switch
Link
NavLink