React-Router-DOM

安裝

-npmjs找到react-router-dom
-yarn add react-router-dom

基本使用方法

1.建立一個資料夾react-router-dom，建立一個index.js檔案

2.引入BrowserRouter as Router(可以用ES6的as，給BrowserRouter起個別名)，要注意，BrowserRouter是基於h5(瀏覽器)的router，它不帶#，但是存在的問題是一重新整理，後端沒有匹配的路由就會掛掉，所以需要後傳那邊做一個跳轉

3.Router就是定義路由的一個根元件，Route就是引入的react-router-dom，要注意Router裡面只能有一個子節點，所以我們可以用Fragment將所有的Route包裹起來，其實react路由很簡單也很語義化：

<Route path="/food" component={Food} />   //這樣你就定義好了一個路由，當你路由為/about的時候就會跳到你的About元件

4.預設React的路由時有包容性，也就是比如說，/food/3和/food會同時匹配；若要實現路由的排他性，用Switch標籤作為唯一的子節點；Switch標籤有一個特點，在這裡面的路由會從上往下進行匹配，一旦有一個匹配成功就不會再往下面匹配了，或者也可以在跳轉路由的標籤裡寫上一個exact，也可以實現精準匹配：

Switch寫法：
    <Switch>
        <Route exact path="/" component={Food} />
        <Route path="/food" component={Food} />
        <Route path="/wiki" component={Wiki} />
        <Route path="/profile" component={Profile} />
        <Route exact component={Page404} />
    </Switch>
exact寫法：
    <Route exact path="/" component={Food} />
 

5.你可以寫一個

<Route exact component={Page404} />

6.引入Link標籤，在這裡就相當於a標籤了，可以to到我們想跳轉的路由

    <Link to="/profile">profile</Link>
    <Link to="/food">food</Link>
    <Link to="/wiki">wiki</Link>
    你會發現在瀏覽器上已經幫我們解析成a標籤了

7.路由重定向

<Redirect from="/" exact to="/food" />
 

8.路由高亮，將Link標籤改成NavLink標籤(實現路由高亮的專用標籤)，然後寫上activeClass="active"就可以實現路由的高亮效果

    <li>
        <NavLink activeClass="active" to="/profile">profile</NavLink>
    </li>
    <li>
        <NavLink activeClass="active" to="/food">food</NavLink>
    </li>
    <li>
        <NavLink activeClass="active" to="/wiki">wiki</NavLink>
    </li>

9.可以在路由元件中console.log(this.props)，你會發現有很多有用的東西

class Profile extends Component{
    render() {
        console.log(this.props)
        return (
            <div>Profile</div>
        )
    }
}

這篇是關於React路由的基礎知識，希望能對想學習React的同學有所幫助，後續會給大家發一個React路由進階