关于router:React-Router学习笔记

34次阅读

共计 2406 个字符，预计需要花费 7 分钟才能阅读完成。

路由是干嘛的？

Routers，Route Matchers，Navigation（or Route Changes）

Routers
<BrowserRouter> &<HashRouter>

区别：保留 URL 的形式和与 web 服务器通信的形式

Route Matchers
Switch & Route

<Switch> 渲染时，它会搜寻通过其孩子 <Route> 元素找到一个匹配以后 URL 的门路。当它找到一个匹配的, 它会渲染这个 <Route> 并疏忽其余的 <Route>。<Route path=”/”> 通常放在最初面。

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

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

门路语法：路由门路是匹配一个（或一部分）URL 的一个字符串模式。大部分的路由门路都能够间接依照字面量了解，除了以下几个非凡的符号：

:paramName – 匹配一段位于 /、? 或 # 之后的 URL。命中的局部将被作为一个参数
() – 在它外部的内容被认为是可选的
* – 匹配任意字符（非贪心的）直到命中下一个字符或者整个 URL 的开端，并创立一个 splat 参数
<Route path=”/hello/:name”> // 匹配 /hello/michael 和 /hello/ryan
<Route path=”/hello(/:name)”> // 匹配 /hello, /hello/michael 和 /hello/ryan
<Route path=”/files/*.*”> // 匹配 /files/hello.jpg 和 /files/path/to/hello.jpg
优先级：路由算法会依据定义的程序自顶向下匹配路由。因而，当你领有两个兄弟路由节点配置时，你必须确认前一个路由不会匹配后一个路由中的门路。例如，千万不要这么做：

<Route path="/comments" ... />
<Redirect from="/comments" ... />

Navigation（or Route Changes）
link & Redirect

<Link to="/">Home</Link>  // 或者能够用这个代替  <a href="/">Home</a>
<Redirect to="/login" />

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

<Route path ="/"> <Home/> </Route>     
// 改为    
<Route exact path ="/"> <Home/> </Route>

有 Switch 包裹的状况下，会依照先后顺序进行匹配，匹配实现后不会再匹配其余路由，这时候能够将这句返回 Switch 的孩子 Route 组件的最初一个，而且这个 ”/” 能够匹配除了后面路由的任何一个
<Route path ="/"> <Home/> </Route>
这个时候发现有一个问题，就是 app 中的跳转列表是不会隐没的，个别状况下咱们可能须要间接跳转到一个新页面

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

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

function App() {return <h1>Hello React Router</h1>;}

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  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 (
      <Router>  
      <div>
          <ul>
            <li><Link to = "/"> 跳转至 Home</Link></li>
            <li><Link to = "/product"> 跳转至 Product</Link></li>
            <li><Link to = "/about"> 跳转至 About</Link></li>
          </ul>
          <Switch>
            <Route path ="/about"> <About/> </Route>
            <Route path ="/product"> <Product/> </Route>
            <Route path ="/"> <Home/> </Route>
          </Switch>
        </div>
      </Router>
    )
  }
}
function Home() {return <h2>Home</h2>;}
function About() {
  return (
    <div>
        <h2>About</h2>
        <Link to ='/home'> 返回至 home</Link>
    </div>
  );
}
function Product() {
  return (
    <div>
        <h2>Product</h2>
        <a href="/home"> 返回至 home</a>
    </div>
  );
}

参考
官网中文文档

正文完