react-router（react番外篇）

import React from 'react';
import { BrowserRouter, Link, Route, Switch,Redirect } from 'react-router-dom';
// BrowserRouter包裹路由的组件
// Link配置路由路径的组件
// Route路由组件path是路径component匹配路径的组件
// Switch只匹配一个
// Redirect重定向
// exact精准匹配
function App(){
    return(
        <div>
             使用路由
             <ul>
                 <li>
                     <Link exact to="/"> 首页 </Link>
                 </li>
                 <li>
                     <Link to="/classes"> 课程 </Link>
                 </li>
                 <li>
                     <Link to="/mine"> 我的 </Link>
                 </li>
                 <li>
                     <Link to="/maaaaa"> 没有的组件 </Link>
                 </li>
             </ul>
             {/* 只匹配一个 */}
             <Switch>
                <Route exact path="/" component={Home}></Route>
                <Route path="/classes" component={Classes}></Route>
                <Route path="/mine" component={Mine}></Route>
                <Route  component={Notfound}></Route>
             </Switch>
        </div>
    )
}
function Notfound(){
    return (
        <div>404页面</div>
    )
}
function Home(){
    return (
        <div>首页</div>
    )
}
function Classes(){
    return (
        <div>课程组件</div>
    )
}
function Mine(){
    return (
        <div>
            <h2>个人中心</h2>
            <ul>
                <li>
                    <Link to="/mine/userInfo">个人中心</Link>
                </li>
                <li>
                    <Link to="/mine/order">客户订单</Link>
                </li>
            </ul>
            <Switch>
                <Route path="/mine/userInfo" component={()=>(<div>个人信息</div>)}></Route>
                <Route path="/mine/order" component={()=>(<div>客户订单</div>)}></Route>
                {/* 路由重定向 */}
                <Redirect to="/mine/userInfo"></Redirect>
            </Switch>
        </div>
    )
}

export default function RouterSample(){
    return (
        <div>
            <h1>演示react-router</h1>
            <BrowserRouter>
                <App></App>
            </BrowserRouter>
        </div>
    )
}

博客地址