react-router官网demo解析1-基础使用

源码

example.js

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

export default function BasicExample() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/dashboard">Dashboard</Link>
          </li>
        </ul>

        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

// You can think of these components as "pages"
// in your app.

function Home() {
  return (
    <div>
      <h2>Home</h2>
    </div>
  );
}

function About() {
  return (
    <div>
      <h2>About</h2>
    </div>
  );
}

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
    </div>
  );
}

index.html

<div id="root"></div>

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './example';

ReactDOM.render(
<App />,
document.getElementById('root')
);

效果图：

相关知识：

<Router></Router>: 一般用来包裹整个react页面，表示这是一个单页面应用，靠路由进行页面的动态渲染。

<Link to="/">Home</Link>: 相当于标签，点击就切换路由到to指定的路径。

<Switch></Switch>:被<Switch>包裹的<Route>最多只有一个会被匹配并进行渲染。匹配的顺序是按照<Route>从上往下进行匹配，页面当前的路径与<Route> 的path一致时候，匹配成功，渲染<Route>内部元素。
注：假如没有<Switch>包裹住<Route>，则可能匹配多个<Route>并渲染。

<Route></Route>:根据path参数进行匹配并渲染其子组件内容。

解析：

根据上述知识，页面的结构主要是两个部分，一个是固定不变的<ul>列表包裹的三个link标签，一个是根据页面的path，即效果图中蓝色画线部分进行匹配的<Route>部分。
点击不同的link超链接，页面的path会改变，从而<Switch>中的不同<Route>会被匹配渲染在下面。
例如：点击About，页面的网址变为https://bnpsd.csb.app/about 此时path为 /about。匹配到<Route path="/about">，渲染出<About />子组件。

下一节：
react-router官网demo解析2-URL参数