1.安装
$ npm install --save react-router-dom
2.使用前主要内容了解 https://reactrouter.com/web/guides/quick-start (web版本)
import {
BrowserRouter as Router,
Switch,
Route,
Link,
useRouteMatch,
useParams
} from "react-router-dom"
=》
- Router/BrowserRouter路由器大标签
- switch(视图切换多个,逻辑参考js switch使用)
- route 页面或者组件
- link链接地址 --不可加样式修饰
- redirect重定向
- navlink可加样式(activeclass)
- useRouteMatch(获取路径与页面地址)
- useParams (获取 url所传的参数)
3.小牛初试
假设组件一
function Home() {
return <h2>Home</h2>;
}
假设组件二
function About() {
return <h2>About</h2>;
}
路由配置
<Link to="/">Home</Link>--跳转到Home /
<Link to="/about">About</Link>---跳转到about /about
<Router> --标签代表包含内容是路由的
<Switch>---包裹多个组件
<Route path="/about">--配置组件和路径
<About />
</Route>
<Route path="/">--配置组件和路径
<Home />
</Route>
</switch>
</Router>
理解有偏差的,欢迎指导