Router

在React中使用react-router-dom路由

使用react構建的單頁面應用，要想實現頁面間的跳轉，首先想到的就是使用路由。在react中經常使用的有兩個 包能夠實現這個需求，是react-router和react-router-dom。此次主要對react-router-dom進行說明。

安裝

先進入項目目錄。在項目命令行中執行：npm install react-router-dom 

在組件中經過對象的解構方式獲取到react-router-dom內置組件，在組件中，按需引入內置組件，在頁面中使用：

路由的內置組件

1.1 HashRouter和BrowserRouter表示一個路由的根容器，將全部的路由相關的都包裹在HashRouter或BrowserRouter裏面，在一個網站中，只須要使用一次根路由就能夠了。

1.2 區別： BrowserRouter--瀏覽器路由（屬於後端路由）使用的是HTML5的新特性History,沒有HashRouter(錨點定位)那樣通用，低版本瀏覽器可能不支持。

               HashRouter--前端has路由（屬於前端路由）在路徑中包含#，至關於HTML的錨點定位

1.3Route 用來路由的，在Router上有兩個比較重要的屬性：path和component 注意事項：不該該在同一個router 上同時使用component和render渲染，component的優先級要高於render,若是同時使用render 會被忽略

1.4 Link 表示一個路由的連接 有一個屬性是---to

<Link to="/home" />

 NavLink

<NavLink activeClassName="" />

區別：一個點擊的時候跳轉，另外一個點擊以後還會額外加一個類名，能夠控制樣式。

         若是更改class名的話就用activeClassName="xxx"

手動跳轉頁面

this.props.history.push("./home")

嵌套路由

JS實現路由跳轉

jump(){
    window.location.href = "/news"  //js路由跳轉的路徑
}

render(){
    return (
        <BrowserRouter>
            <div>
                <h1>這是網站的根目錄</h1>
                <hr />
                <button onClick={()=>{this.jump()}}>新聞</button>
                <hr />
                <Route path="/news" component={News}></Route>
            </div>
        </BrowserRouter>
    );
}

 

App.js

import React from 'react';
import './App.css';
import Home from './Home';

function App() {
  return (
    <Home />
  );
}

export default App;

Home.js

import React, { Component } from 'react'
import {Route,Link,Switch} from "react-router-dom"

export default class First extends Component {
  render() {
    return (
      <div>
            <p><Link className="link" to="/first">首頁</Link></p>
            <p><Link className="link" to="/second">關於</Link></p>
            <p><Link className="link" to="/third">新聞</Link></p>
            <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
               <Switch>
                 <Route path="/first" component={First} />
                 <Route path="/second" component={Second} />
                 <Route path="/third" component={Third} />
               </Switch>
        </div>
      </div>
    )
  }
}        

路由傳值