React學習：react-router-dom-主要組件

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頁面。