React 項目初始化步驟

1.初始化基礎的項目

1. npm install -g create-react-app
2. create-react-app my-app
3. cd my-app
4. yarn start

2. 路由（React-router-dom）

2.1 React-router 和 React-router-dom

• React-router：提供了一些 router 的核心 api，包括Router、Route、Switch等，但是沒有提供 dom 操作跳轉的 api。
• React-router-dom：提供了 BrowserRouter、Route、Link 等 api，我們可以通過 dom 的事件控制路由。例如點擊一個按鈕進行跳轉，大多數情況下我們是這種情況，所以在開發過程中，我們更多的是使用 React-router-dom。

# React-router-dom 安裝
yarn add react-router-dom --save

2.2 React-router-dom 核心用法

HashRouter 和 BrowserRouter：使用 HashRouter 時，導航 url 中會帶有“#”號，使用 BrowserRouter，則沒有。

HashRouter 示例代碼如下：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App/App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter, HashRouter, Route } from 'react-router-dom'

ReactDOM.render(
  <HashRouter>
    <Route path="/" component={App}></Route>
  </HashRouter>, document.getElementById('root')
);

serviceWorker.unregister();

HashRouter 看起來是這樣的：

如果不需要這種帶“#”號的，則把代碼位置的 【HashRouter】替換成【BrowserRouter】即可。

2.3 Route

Route：是路由的一個原材料，它控制路徑對應顯示的組件。經常用到的有 exact、path、component 屬性。

<Route exact path="/" component={Home}></Route>
<Route path="/second" component={Second}></Route>
<Route path="/thired" component={Thired}></Route>

• exact：控制匹配到路徑時不會繼續向下匹配。
• path：標識路由的路徑。
• component：標識路由對應的組件。

2.3 路由跳轉（Link 和 NavLink）

兩者都是可以控制路由跳轉的，不同點是 NavLink 的 api 更多，更能滿足你的需求。

Link

主要的 api 是 to，to可以接受 string 或者一個 object，來控制 url。如下：

<Link to="/courses" />

<Link to={{
  pathname: '/courses',
  search: '?sort=name',
  hash: '#the-hash',
  state: { fromDashboard: true }
}}/>

NavLink

可以爲當前選中的路由設置類名、樣式以及回調函數等。使用如下：

<NavLink exact activeClassName="selected" to="/">home</NavLink>
<Route exact path='/' component={Home}></Route>

<NavLink exact activeClassName="selected" to="/second/1234">home</NavLink>
<Route path="/secord/:id" component={Second}></Route>

• exact：用於嚴格匹配，匹配到則不會向下匹配
• to：控制跳轉路徑
• activeClassName：選中狀態的類名，通過它來修改選中狀態的樣式。

match 獲取路由參數

match 是在使用 router 之後被放入 props 中的一個屬性，在class創建的組件中，通過【this.props.match】獲取 match 中的信息。

當：

<NavLink exact activeClassName="selected" to="/text/123">home</NavLink>
<Route path="/text/:id" component={Text}></Route>

此時，match 的值如下：