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 的值如下：