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 (
    
      

        

          

            Home
          
          

            About
          
          

            Dashboard
          
        

        
          
            
          
          
            
          
          
            
          
        
      
    
  );
}

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

function Home() {
  return (
    

      
Home
    
  );
}

function About() {
  return (
    

      
About
    
  );
}

function Dashboard() {
  return (
    

      
Dashboard
    
  );
}

index.html

index.js

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

ReactDOM.render(
,
document.getElementById('root')
);

效果图：

相关知识：

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

Home: 相当于标签，点击就切换路由到to指定的路径。

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

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

解析：

根据上述知识，页面的结构主要是两个部分，一个是固定不变的

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

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