React Router学习笔记

路由是干嘛的？

路由三要素

Routers，Route Matchers，Navigation（or Route Changes）

Routers 
  &

   区别：保存URL的方式和与web服务器通信的方式

Route Matchers
Switch & Route

渲染时，它会搜索通过其孩子元素找到一个匹配当前URL的路径。当它找到一个匹配的,它会渲染这个并忽略其他的。通常放在最后面。

这里不得不提一下React Router路由配置和路由的匹配原理。路由匹配原理包含三个方面：嵌套关系，路径语法，优先级

嵌套关系：嵌套路由被描述成一种树形结构。React Router 会深度优先遍历整个路由配置来寻找一个与给定的 URL 相匹配的路由。

路径语法：路由路径是匹配一个（或一部分）URL 的 一个字符串模式。大部分的路由路径都可以直接按照字面量理解，除了以下几个特殊的符号：

:paramName – 匹配一段位于 /、? 或 # 之后的 URL。 命中的部分将被作为一个参数
() – 在它内部的内容被认为是可选的
* – 匹配任意字符（非贪婪的）直到命中下一个字符或者整个 URL 的末尾，并创建一个 splat 参数
// 匹配 /hello/michael 和 /hello/ryan
// 匹配 /hello, /hello/michael 和 /hello/ryan
// 匹配 /files/hello.jpg 和 /files/path/to/hello.jpg
 优先级：路由算法会根据定义的顺序自顶向下匹配路由。因此，当你拥有两个兄弟路由节点配置时，你必须确认前一个路由不会匹配后一个路由中的路径。例如，千万不要这么做：

Navigation（or Route Changes）
link & Redirect

Home  // 或者可以用这个代替  Home
 

没有Switch包裹的情况下：http://localhost:3000/about会匹配两个组件Home和About，原理：他会对每个path都进行匹配

       
//改为    
  

有Switch包裹的情况下，会按照先后顺序进行匹配，匹配完成后不会再匹配其他路由，这时候可以将这句返回Switch的孩子Route组件的最后一个，而且这个"/"可以匹配除了前面路由的任何一个

这个时候发现有一个问题，就是app中的跳转列表是不会消失的，一般情况下我们可能需要直接跳转到一个新页面

疑问
1.规定：使用一个路由器,确保呈现在根元素的层次结构。

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";

function App() {
  return 
Hello React Router
;
}

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

附：完整代码

// route切换组件的完整代码
import logo from './logo.svg';
import { BrowserRouter as Router, Route, Link, Switch} from "react-router-dom";
// import Home from './pages/Home'
// import Product from './pages/Product'

import React, { Component } from 'react'
import ScrollBanner from "./components/Banner/ScrollBanner.jsx";

export default class App extends Component {
  render() {
    return (
        
      

          

            
跳转至Home
            
跳转至Product
            
跳转至About
          
          
              
              
              
          
        
      
    )
  }
}
function Home() {
  return 
Home
;
}
function About() {
  return (
    

        
About
        返回至home
    
  );
}
function Product() {
  return (
    

        
Product
        返回至home
    
  );
}

参考 
官网中文文档