react路由 react-router-dom

​

安装react-router-dom： npm i react-router-dom

使用：

index.js引入Router文件

// index.js

import Router from './Router';

ReactDOM.render(
  <React.StrictMode>
    <Router />
  </React.StrictMode>,
  document.getElementById('root')
);

在Router.js文件中：

// Router.js

import React from "react";
import {BrowserRouter as Router, Route, Link, Switch} from "react-router-dom";
import Home from './pages/home';
import List from './pages/list';
import Chat from './pages/chat';
import './App.css';

function AppRouter() {
    const data = [
      {name: '首页', path: '/'},
      {name: '列表', path: '/list'},
      {name: '会话', path: '/chat'},
      {name: '拖拽', path: '/drag'},
    ];
    const list = data.map(item => {
        return (
            <li key={item.path} className="items">
                <Link to={item.path}>{item.name}</Link>
            </li>
        )
    });
    return (
      <Router>
          <ul className="box">{list}</ul>
          <Switch>
              <Route path="/list" exact component={List} />
              <Route path="/" exact component={Home} />
              {/** 如果组件里面还有路由导航，则匹配时不能使用 exact 属性 */}
              <Route path="/chat" component={Chat} />
              <Route path="/drag" component={Drag} />
          </Switch>
      </Router>
    )
}

export default AppRouter;

Switch 包裹路由：代表只匹配一个路由，若不使用switch嵌套，路由会多次匹配；

Link标签：类似于 a 标签(最终也会被渲染为a标签)。to 属性可理解为a标签的href属性

Redirect： 进行重定向 使用 to 属性

Route： path 表示属性匹配路径； component 表示路径匹配成功后渲染的组件; exact属性表示精准匹配(路径信息要完全匹配)，若没有exact则是模糊匹配；

例如上述例子中/list路径只会匹配到 ；/chat或者/chat/a则都可以匹配到

BrowserRouter： 可传入一个对象修改路由的一些信息，比如修改路由的前缀

import { BrowserRouter } from 'react-router-dom';

const routerOptions = {
  // 自动加上路由的前缀，格式是前面有一个前导斜杠，但不能有尾部斜杠
  // 如：basename='test',则路由前缀：localhost:3000/test
  // 那访问地址栏时则localhost:3000/test/xxx
  basename={string}, 
  // 如果为 true ，在导航的过程中整个页面将会刷新
  forceRefresh={bool},
  
}

const RouterApp = props => (
  <BrowserRouter {...routerOptions}>
    <App {...props} />
  </BrowserRouter>
)
export default RouterApp

路由的传值：

1）在路径添加?key=value 的方式，可使用 this.props.location.search 的方式获取

2）通过动态路由传值，如/a/:id 使用 this.props.match.params.xxx 来获取 match

路由的跳转：

除了上述的Link标签、Redirect标签跳转，还可以进行编程式跳转：

this.props.history.push('/detail');

this.props.history.replace('/detail');

this.props.history.goBack() ;

Prompt 路由的拦截：

当前页面正常路由离开时会触发，比如link、redirect、编程式导航

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

const App = () => {
  const leave = (event) => {
   // do something  这里可以写自己的逻辑
    return true  // 返回true则跳转继续，跳转到其他页面
    return false //  返回false则跳转中断

   //  若是返回false，然后做其他的业务，比如弹窗提示等，之后需要跳转到对应页面
   //  这时可以先记录对应页面的 url，其中event里面就有对应的url
   //  console.log(event)   url = event.pathname  
   //  最后就可以跳转：this.props.push(url)；
  }
  return (
    <div>
        '''
        <Prompt message={leave} />  // 当正常路由离开时会触发，比如link、redirect、编程式导航
    </div>
  )
}

​