React路由-基礎篇

摘要： React-Router-DOM ReactRouter網址 ， 安裝 -npmjs找到react-router-dom -yarn add react-router-dom 基本使用方法 1.建立一個資料夾react-router-dom，建立一個index...

React-Router-DOM

ofollow,noindex" target="_blank">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.路由重定向

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