react（react-router-dom）路由学习

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"

=》

1. Router/BrowserRouter路由器大标签
2. switch（视图切换多个，逻辑参考js switch使用）
3. route 页面或者组件
4. link链接地址 --不可加样式修饰
5. redirect重定向
6. navlink可加样式（activeclass）
7. useRouteMatch(获取路径与页面地址)
8. 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>

 

理解有偏差的，欢迎指导