React-6-路由

一、介绍及安装使用react-router

1.特点

①路由也是组件

②分布式配置，在各个组件都可以使用

③包含式配置，可匹配多个路由

2.安装使用

npm install react-router-dom --save

使用步骤：

• 引入顶层路由BrowserRouter组件包裹根组件
• 引入Link组件编写路由导航
• 引入Route组件编写导航配置
• 编写导航配置对应的component组件

import React, { Component } from 'react'
import { BrowserRouter, Link, Route, Switch } from 'react-router-dom'


function Home() {
    return <div>首页</div>
}

function Course() {
    return <div>课程</div>
}

function Mine() {
    return <div>我的</div>
}

function NotFound() {
    return <div>没有的组件</div>
}

function App() {
    return (
        <div>
            <ul>
                <li><Link to="/">首页</Link></li>
                <li><Link to="/course">课程</Link></li>
                <li><Link to="/mine">我的</Link></li>
                <li><Link to="/notfound">没有的组件</Link></li>
            </ul>  
            <Switch>
                <Route path="/" exact component={Home}></Route>
                <Route path="/course" exact component={Course}></Route>
                <Route path="/mine" exact component={Mine}></Route>
                <Route component={NotFound}></Route>                
            </Switch>          
        </div>

    )
}

export default class RouterSample extends Component {
    render() {
        return (
            <div>
                <h1>学习react-router</h1>
                <BrowserRouter>
                  <App></App>
                </BrowserRouter>
            </div>
        )
    }
}

RouterSample.js