React学习：react-router-dom-主要组件

Posted 2021-03-26 liyaping

React Router中的组件主要有三类:

• routers, 路由，例如<BrowserRouter> 、 <HashRouter>

• route matchers,路由匹配 如 <Route> 、<Switch>

• navigation,导航，如 <Link>、 <NavLink>、<Redirect>

以上的这些组件都是从react-router-dom中引入。

import { BrowserRouter, Route, Link } from "react-router-dom";

1.Routers

　　1.BrowserRouter，使用的是常规的url路径，但是他们需要正确的配置服务器，具体的来说，我们需要自己配置一个路径出来匹配url，跟vue-router差不多。Create React支持这种模式，并附带了如何配置该生产服务器。

　　2.HashRouter，将当前位置存储在URL的散列部分中，因此URL类似于http://example.com/#/your/page。由于散列从未发送到服务器，这意味着不需要特殊的服务器配置。

要使用路由器，只需确保它是在元素层次结构的根上呈现的。通常你会把你的顶层元素包装在一个路由器里，就像这样:

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")
);

2.Route Matchers

有两个路由匹配组件:Switch 和 Route。当Switch 渲染时，它会搜索其子Route元素，以查找路径与当前URL匹配的元素。当它找到一个，它渲染那个<route>并且忽略所有其他的。这意味着您应该将具有更具体(通常更长的)路径的s放在不太具体的路径之前。

如果没有匹配的Route，则不进行任何渲染

<Switch>
    <Route path="/about">
        <About />
     </Route>
      <Route path="/topics">
         <Topics />
       </Route>
       <Route path="/">
            <Home />
       </Route>
</Switch>        

 

 <Route path="/">

 

注意此处应该是相对路径而不是完整的url。

3.Navigation

React Router提供一个组件来在应用程序中创建链接 Link。类似于html里面的a标签。

NavLink 是一种特殊类型的，它可以在匹配当前位置时将自己设置为“active”。

Redirect类似于初始进来的重定向

<Redirect to="/login" />

他会在渲染的时候 首先进入login页面。