react（十三） Router的基本使用

• React Router 库
• React Router 提供了多种不同环境下的路由库
  • web
  • native

基于 Web 的 React Router

基于 web 的 React Router 为：react-router-dom

安装

npm i -S react-router-dom

组件

BrowserRouter 组件 – history

• 基于 HTML5 History API 的路由组件

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from "react-router-dom";
import App from './App';
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

HashRouter 组件 – hash

• 基于 URL Hash 的路由组件

import React from 'react';
import ReactDOM from 'react-dom';
import {HashRouter} from "react-router-dom";
import App from './App';
ReactDOM.render(
  <HashRouter>
    <App />
  </HashRouter>,
  document.getElementById('root')
);

Route 组件

• 通过该组件来设置应用单个路由信息，Route 组件所在的区域就是就是当 URL 与当前 Route 设置的 path 属性匹配的时候，后面 component 将要显示的区域
• path 该路由要匹配的 url。默认是模糊匹配，即当前 url 以该 path 为开始时就进行匹配
• exact 精确匹配，则 当前 url 必须 和 path 一致时才会进行匹配 (path: /join, /join|/join/)
• strict 严格匹配, url === path (path: /join, /join) 使用 strict 时，该 route 必须 先设置 exact
• 多规则匹配 [path1,path2,path3]
• component 匹配成功之后要显示的视图
• Switch 在路径相同的情况下，只匹配第一个
  App.js

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Nav from './component/nav';
import View404 from './view/404view';
import AboutView from './view/aboutview';
import IndexView from './view/indexview';
import JoinView from './view/joinview';

function App() {
  return <div id="box">
      <Nav />
      <Switch>
        <Route 
            path={["/","/home"]}
            exact
            component={IndexView}
        />
        <Route 
            path="/about"
            component={AboutView}
        />
        <Route 
            path="/join"
            exact
            strict
            component={JoinView}
        />
        <Route 
          component={View404}
        />
      </Switch>
  </div>;
}
export default App;

Link 组件

• Link 组件用来处理 a 链接 类似的功能（它会在页面中生成一个 a 标签）。

但设置这里需要注意的，react-router-dom 拦截了实际 a 标签的默认动作，然后根据所有使用的路由模式（Hash 或者 HTML5）来进行处理，改变了 URL，但不会发生请求，同时根据 Route 中的设置把对应的组件显示在指定的位置

import React from "react";
import { Link } from "react-router-dom";
export default function Nav() {
  return <nav>
    <Link to="/">首页</Link>
    <span> | </span>
    <Link to="/about">关于</Link>
    <span> | </span>
    <Link to="/join">加入</Link>
    <span> | </span>
    // 但是Link 不能写外边的跳转地址
    <a href="https://www.baidu.com">百度</a>
    <hr />
  </nav>
}