react路由学习小结

这是我参与更文挑战的第8天，活动详情查看：更文挑战

路由

安装

npm install react-router-dom --save
复制代码

基础

//两个子路由
//Mine.jsx
import React from "react";
export default class Mine extends React.Component {
  render() {
    return <div>Mine</div>;
  }
}
//Home.jsx
import React from "react";
export default class Home extends React.Component {
  render() {
   return  <div>Home</div>;
  }
}
复制代码

//App.jsx
import Home from "./pages/Home";
import Mine from "./pages/Mine";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
class App extends React.Component {
    render() {
        return (
          <div>
            <Router>
              <Route path="/home" component={Home}></Route>
              <Route path="/mine" component={Mine}></Route>
            </Router>
          </div>
        );
  }
}
复制代码

两种路由类型

• 哈希类型（HashRouter） 锚点链接
• History（BrowserRouter）h5新特性 history.push()来实现

import { BrowserRouter as Router } from "react-router-dom"; //使用history模式
import { HashRouter as Router } from "react-router-dom"; //使用hash模式
复制代码

路由的跳转

import { HashRouter as Router, Route, Link } from "react-router-dom";//引入Link组件
//使用
<Router>
    <ul>
        <li>
        	<Link to="/home">Home页面</Link> //导航地址
        </li>
        <li>
        	<Link to="/mine">Mine页面</Link>
        </li>
    </ul>
    <Route path="/home" component={Home}></Route>
    <Route path="/mine" component={Mine}></Route>
</Router>
复制代码

路由的匹配问题

exact：bool

• 现在有两个路径 /person/man与/person,

• 默认情况下 跳转到/person/man时，也会匹配到person

  //解决方法   使用exact来实现精准匹配
   <Route exact={true} path="/person" component={人类}></Route>
   <Route  path="/person/man" component={男人}></Route>
  复制代码

strict：bool

• 更为严格的匹配方式，将地址末尾有 **/**与无 / 的情况当作两个地址

404NotFound

//不加path，所有路径都能匹配到
<Route component={NotFound}></Route>
复制代码

• 存在问题—>所有的页面，在显示原有页面的基础上，都额外显示404

//通过引入Switch来解决
import { HashRouter as Router, Route, Link, Switch } from "react-router-dom";
  <Router>
          <ul>
            <li>
              <Link to="/home/mine">Home页面</Link>
            </li>
            <li>
              <Link to="/mine">Mine页面</Link>
            </li>
          </ul>
          <Switch> //用Switch将路由包裹
            <Route exact={true} path="/home" component={Home}></Route>
            <Route path="/home/mine" component={Mine}></Route>
            <Route component={NotFound}></Route>
          </Switch>
</Router>
复制代码

NavLink

• 路由激活时高亮

  <NavLink to="/about">About</NavLink> //选中时会为a标签添加一个名为 active的css类
  
  <NavLink to="/faq" activeClassName="selected"> //将激活时的类名改为selected
    FAQs
  </NavLink> 
  //NavLink是Link的一种特殊形式
  <Link
    to={{
      pathname: "/courses", //地址
      search: "?sort=name", //参数
      hash: "#the-hash", 
      state: { fromDashboard: true } //隐形传递参数，地址栏中不显示
    }}
  />
  
  复制代码

参数的传递

params

//父组件
<Route path="/home/mine/:id" component={Mine}></Route>
//子组件  //必须传参数，否则不能匹配到对应路由 this.props.match.params[参数名]
  render() {
    return <div>Mine{this.props.match.params.id}</div>;
  }
//可选参数，后面加？ 代表参数可选，不穿参数也能匹配
<Route  path="/home/mine/:id?" component={Mine}></Route>

复制代码

query

    const query = new URLSearchParams(props.location.search);
    console.log(query.get("sort"));  //获取下图中sort的参数
复制代码

重定向

 //匹配到 /aaa这个地址跳转到/home
<Redirect strict from="/aaa" to="/home" />
复制代码

push和replace

history.push('/home')
history.replace('/home')
复制代码

withRouter

withRouter的作用就是, 如果我们某个东西不是一个Router, 但是我们要依靠它去跳转一个页面, 比如点击页面的logo, 返回首页, 这时候就可以使用withRouter来做.

prompt

离开当前路由时的钩子，例如页面中存在输入的内容时，离开路由时询问用户是否需要离开

when:离开的时机

message：提示的内容

import {Prompt} from 'react-router-dom'

return(
    <div>
    	<Prompt when={} message={}/>
    </div>
)
复制代码

路由嵌套

this.props.children //子路由渲染的位置
复制代码