react-router使用

安装

npm install --save react-router-dom

基本使用

import React from "react";
import Home from "./pages/Home";
import Mine from "./pages/Mine";
import { BrowserRouter as Router, Route } from "react-router-dom";


function App() {
  return (
    <div className='App'>
      {/* Route 需要用 Router 组件包裹 */}
      <Router>
        <Route path='/home' component={Home}></Route>
        <Route path='/mine' component={Mine}></Route>
      </Router>
    </div>
  );
}

export default App;

HashRouter 和 BrowserRouter

HashRouter 是锚点形式和vue中的hash一致
BrowserRouter 是h5的history api 和vue的history一致

Link

类似于vue中的router-link

import React from "react";
import Home from "./pages/Home";
import Mine from "./pages/Mine";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

function App() {
  return (
    <div className='App'>
      {/* Route 需要用 Router 组件包裹 */}
      <Router>
        {/* 可以封装成一个 Nav 组件 */}
        <ul>
          <li>
            <Link to='/home'>home page</Link>
          </li>
          <li>
            <Link to='/mine'>mine page</Link>
          </li>
        </ul>
        <Route path='/home' component={Home}></Route>
        <Route path='/mine' component={Mine}></Route>
      </Router>
    </div>
  );
}

export default App;

to属性可以是字符串，也可以是对象

            <Link
              to={{
                pathname: "/mine",
                search: "?name=huxianc",
                hash: "#the-hash",
                state: { flag: "flag" }, // 页面url地址不会显示
              }}
            >
              mine page
            </Link>

NavLink

个人感觉是Link的超集，主要作用是给当前页面的Link默认新增一个叫active的类名，也可以通过activeClassName来自定义，同时也支持activeStyle

Route 属性

• exact 精准匹配，path一模一样才会匹配
• strict属性主要就是匹配反斜杠，规定是否匹配末尾包含反斜杠的路径，如果strict为true，则如果path中不包含反斜杠结尾，则他也不能匹配包含反斜杠结尾的路径，这个需要和exact结合使用
• render

<Route path='/demo' render={() => <div>hello demo</div>}></Route>

import React from "react";
import Home from "./pages/Home";
import Mine from "./pages/Mine";
import NotFound from "./pages/NotFound";
import Demo from "./pages/Demo";
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";

function App() {
  return (
    <div className='App'>
      {/* Route 需要用 Router 组件包裹 */}
      <Router>
        {/* 可以封装成一个 Nav 组件 */}
        <ul>
          <li>
            <Link to='/home'>home page</Link>
          </li>
          <li>
            <Link to='/mine'>mine page</Link>
          </li>
        </ul>
        {/* switch 保证只能存在一个页面 */}
        <Switch>
          <Route path='/home' component={Home}></Route>
          <Route path='/mine' component={Mine}></Route>
          {/* <Route path='/demo' render={() => <div>hello demo</div>}></Route> */}
          <Route path='/demo' render={(props) => <Demo {...props} name="huxianc" />}></Route>
          <Route component={NotFound}></Route>
        </Switch>
      </Router>
    </div>
  );
}

export default App;

// Demo.jsx
import React from 'react'

const Demo = ({ name }) => {
  return <div>Demo:{name}</div>
}

export default Demo

Redirect

<Redirect from="/hellomine" to="/mine"></Redirect>

可以用来做权限判断，比如一个页面必须是登录了才能访问的

import React, { Component } from 'react'
import { Redirect } from 'react-router'


export default class Shop extends Component {
  state = {
    isLogin: false
  }

  render() {
    const { isLogin } = this.state
    return (
      <div>
        {
          isLogin ?
            <div>shop</div>
            : <Redirect to="/login"></Redirect>
        }
      </div>
    )
  }
}

404页面

import React from "react";
import Home from "./pages/Home";
import Mine from "./pages/Mine";
import NotFound from "./pages/NotFound";
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";

function App() {
  return (
    <div className='App'>
      {/* Route 需要用 Router 组件包裹 */}
      <Router>
        {/* 可以封装成一个 Nav 组件 */}
        <ul>
          <li>
            <Link to='/home'>home page</Link>
          </li>
          <li>
            <Link to='/mine'>mine page</Link>
          </li>
        </ul>
        {/* switch 保证只能存在一个页面 */}
        <Switch>
          <Route path='/home' component={Home}></Route>
          <Route path='/mine' component={Mine}></Route>
          <Route component={NotFound}></Route>
        </Switch>
      </Router>
    </div>
  );
}

export default App;

路由传参

{/* 参数后可以加一个 ? 表示该参数是可选参数，不然如果不带参数会到404 */}
{/* 多参数是继续拼接 /:arg? */}
<Route path='/home/:id' component={Home}></Route>

//home
import React from 'react'

export default class Mine extends React.Component {
  render() {
    return (
      <div>home:{this.props.match.params.id}</div>
    )
  }
}

获取参数

方案一

import React from 'react'

const Mine = (props) => {
  const params = new URLSearchParams(props.location.search)
  console.log(params.get("name"))

  return (
    <div>mine</div>
  )
}

export default Mine

方案二

import React from 'react'
import qs from "querystring"

const Mine = (props) => {
  const value = qs.parse(props.location.search.slice(1))
  console.log(value)

  return (
    <div>mine</div>
  )
}

export default Mine

withRouter

定义的class 导出为withRouter(class)

Prompt

离开页面前触发

<Prompt when={触发条件}  message={'提示文字'} />

路由嵌套

感觉有点像vue中的插槽
路由配置和其他的基本一致，只是通过插入父组件内部来实现
页面显示位置通过this.props.children来获取