面试 -路由的基本使用

import React, { Component } from "react";
import { BrowserRouter, Link, Switch, Route } from "react-router-dom";
import About from "./pages/About";
import Main from "./pages/Main"; //路由组件，放在pags文件夹

export default class App extends Component {
  render() {
    return (
      <div className="flex-row-center">
        <BrowserRouter>
          {/* 第1步：整个应用都交由一个"路由器"去包裹管理(其实可以在index.js里直接把<App/>组件包起来),做监听 */}
          <div style={{ marginRight: 20 }}>
            {/* 第2步：路径切换 */}
            <Link to="/about">About</Link>
            <br />
            <Link to="/main">Main</Link>

            {/* 
            --------------------------------------Link与NavLink的区别？-------------------------------------------------
              1. NavLink有一个高亮属性：activeClassName="";
              <NavLink activeClassName="active" className=""></NavLink>
            */}
          </div>
          <div>
            {/* 没有switch时，只要路径相同，所有匹配上的路由组件都会展示； switch能提高匹配效率（单一匹配）*/}
            <Switch>
              {/* 第3步：注册路由 */}
              <Route path="/about" component={About} />
              <Route path="/main" component={Main} />

              {/* 
              -----------------------------------多级路径刷新页面，样式丢失问题？-----------------------------------
              1. 以下两种情况都会被丢失样式的index.html兜底：（条件）
                  （1）.<Route path="/a/main" component={Main} />多级路径刷新
                  （2）.在输入框输入一堆没有的路径时
              2. 原因？
                  index.html里引入的css样式，会在刷新重新请求服务器时去带上这个/a
              3. 解决？
                  1）. css引入使用绝对路径
                  2）。（基本不用）使用<HasnRouter>路由器进行全局包裹，因为/#/...后面的额东西，请求时不带入
              */}
              {/* 
                ---------------------------------路由的模糊匹配与精准匹配------------------------------------------
                1. 模糊匹配 (包含且顺序一致)
                举例：
                  <Link to="/about/a/b">About</Link>
                  <Route path="/about" component={About} />
                2. 开启精准匹配 exact（不要随便开，否则会无法继续匹配二级路由）
                  <Route exact path="/about" component={About} />
              */}
            </Switch>

            {/* 
              ------------------------------------路由组件与普通组件的区别？----------------------------------------
              1. 组件写法不同
                    普通组件：<Demo/>
                    路由组件：<Route path="/about" component={About} />
              2. 存放的位置不同
                    普通组件：components文件夹
                    路由组件：pages文件夹
              3. 接收到的props不同
                    普通组件：写组件标签时传了啥，就接收啥
                              <div {...this.props}>其中this.props.children可以拿到“<Demo>标签体内容</Demo>”传进来的标签体内容
                    路由组件：接收到路由器router传给路由组件的3个参数
                              history ：go/goBack/goForward/push/replace
                              location : pathname/search/state
                              match : params/path/url
            */}
          </div>
        </BrowserRouter>
      </div>
    );
  }
}
/**
  react-router-dom插件库 (dom表示web端)

    1. 下载 
        npm i --save react-router-dom
        import { Link, BrowserRouter } from "react-router-dom";

    2. 内置组件?
          <BrowserRouter>
          <HashRouter>
          <Route>
          <Redirect>
          <Link>
          <NavLink>
          <Switch>

    3. API?
          history对象/match对象/withRouter函数
*/