React-router-dom 1.安装 react-router-dom 2.基本路由最外层需要 Router L

1.安装 react-router-dom

npm install react-router-dom

2.基本路由

最外层需要 Router Link等只能在 Router 里面使用
Link 最终会转成 a 标签会根据路由去匹配不同的 Route
不同的组件放在 Switch 里面，也可以不放但是放在里面 Switch 的意思是精准的根据不同的path 渲染不同Route下的组件，但是其匹配规则是从上向下执行，一旦匹配，就不再匹配其他有的规则
<Route path="/me> <Home /> </Route> 这种写法，在home组件中将不会有 history location，match 等props 5. <Route path="/home" component={Home}></Route> 这种写法能获取到props

3.路由传参

动态路由：/detail/id 这种形式的, path='/detail/:id'做动态路由获取参数的时候使用 props.match.params 获取即可或者使用 hooks 的方法 useParams

查询参数: /detail?id=xxx 的形式, path= '/deatil' 获取参数是从props.location.serch 中解析

函数隐式传参：

  this.props.history.push({
    pathname:'/detail',
    state:{
    id:3
    }
  })

通过 props.history.location.state 获取

4.嵌套路由

path 的嵌套 <Route path="/home/index" component={XXXXX}> </Route>

5.小结

路由组件分三类

Router <BroeserRouter /> 和 <HashRouter />

即是 history模式和 hash模式

主要不同是浏览器中url的表现形式以及与服务器交流的方式

<BrowserRouter /> 使用常规的 url 形式但是在 build以后服务端需要自己去配置 *****

<hashRouter/> 使用哈希形式的url 带有 #

在使用 route组件时请确保他是 APP的根组件

匹配组件 <Switch/> 和 <Route/> 常规的是非精准匹配 exact 精准匹配
导航组件比如 <Link />以及 <NavLink> 和 <Redirect>

<NavLink> 被匹配的时候，可以设置 active class

<Redirect to="/login" /> 强制路由跳转到其他 url

hooks

React Router 提供了四个有用的 Hook 可以在组件内部使用它前提是你的 react版本号 >= 16.8

useHistory
useLocation
useParams
useRouteMatch

useHistory

hook 提供了 history 对象，获取其可以进行导航设置

例子

 import { useHistory } from "react-router-dom"
 
 function HomeButton ( ) {
   let history = useHistory();
   
   function handleClick(){
      history.push("/home")
   }
   
   return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
   )
 }

history 对象:

action: "PUSH"
block: ƒ block(prompt)
createHref: ƒ createHref(location)
go: ƒ go(n)
goBack: ƒ goBack()
goForward: ƒ goForward()
length: 30
listen: ƒ listen(listener)
location: {pathname: "/home/m1", search: "", hash: "", state: undefined, key: "6odisu"}
push: ƒ push(path, state)
replace: ƒ replace(path, state)
proto: Object

useLocation

useLocation hook 产生的 location 实例，是一个对象 {pathname: "/home/m1", search: "", hash: "", state: undefined, key: "6odisu"} 可以获取当前页面的url

import React , { useEffect } from "react"
import ReactDom from "react-dom"
import { 
           BrowserRouter ad Router,
           Switch,
           useLocation
} from "react-router-dom"

function usePageViews(){
  let location = useLocation()
  
  useEffect(()=>{
     go.send(["pageview" , location.pathname])
  },[location])
}

function App(){
  usePageViews();
  return <Switch>...</Switch>
}

ReactDom.render(
   <Router>
   <App>
   </Router>,
   node
)

useParams

useParams hook 使用在动态路由里面，便于获取当前动态参数

  import React from 'react'
  import ReactDom from 'react-dom'
  import {
      BrowserRouter ad Router,
      Switch,
      Route,
      useParams
  } from "react-router-dom"
  
  function BlogPost (){
  //获取当前动态参数
    let { slug } = useParams();
    return <div> Now showing post { slug } </div>
  }
  
  ReactDom.render(
    <Router>
      <Switch>
        <Route exact path="/" component={ HomePage } />
        <Route path="/blog/:slug" component={BlogPost} />
      </Switch>
    </Router>,
    node
  )

useRouteMatch

获取当前 url 相关参数。对用实例返回的属性包括 isExact params path url

 import React from 'react'
 import { link , Switch , Route , useRouteMatch } from 'react-router-dom'
 
 function Home(props){
     let match = useRouteMatch()
     return (
       <div className="Home">
         <h1> 首页 </h1>
       </div>
     )
 }
 
 export default Home;

路由的基本原理

路由做的事情：管控 url 改变，改变浏览器中的地址

Router 做的事情： URL 改变时，触发渲染，渲染对应的组件

url 有两种：一种带 '#' 一种不带 '#' 分别对应 Broeser模式和 Hash 模式