React路由-基礎篇

React-Router-DOM

ReactRouter網址，

---

安裝

-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.路由重定向 ，當路由匹配了/后會跳轉到/food路由，注意在這里要加上exact，意為精准匹配

<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路由進階