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
>
)
}
博客地址
