React.路由（1）

官网 中文

	vue-router	react-router
路由配置	分离式（在一个单独的文件里配置）	嵌套式（路由配置在组件内部，任何组件都可以写）
匹配	排他性（只有一个路由被匹配上）	包容性（多个路由可能会同时被匹配上）

1、作用：

路由最基本的职责就是当页面的访问地址与 Route 上的 path 匹配时，就渲染出对应的 UI 界面。

实现SPA应用，整个项目只有一个完整页面。页面切换不会刷新页面，内容局部更新

2、react-router提供了两种路由模块

1)．React-Router：

提供了一些router的核心API，包括Router, Route, Switch等，但是它没有提供 DOM 操作进行跳转的API。

2)．React-Router-DOM：

提供了 BrowserRouter,HashRouter , Route, Link等 API,我们可以通过 DOM 的事件控制路由。例如点击一个按钮进行跳转，所以在开发过程中，我们更多是使用React-Router-DOM。

3、路由的两种模式：

1)．HashRouter：

url中会有个#，例如localhost:3000/#，HashRouter就会出现这种情况，它是通过hash值来对路由进行控制。如果你使用HashRouter，你的路由就会默认有这个#。

2)．BrowserRouter：

很多情况下我们则不是这种情况，我们不需要这个#，因为它看起来很怪，这时我们就需要用到BrowserRouter。

记住：去掉多余的BrowserRouter 标签，整个项目中，写一个BrowserRouter 标签就行，否则，react路由时，不能正常渲染，需要刷新，才能渲染。

4、路由的配置

1）.Route:

​ vue的路由配置是分离式的，在一个单独的文件里进行路由配置。react是嵌套式的，路由配置就写在组件内部，任何组件都可以写。

​ vue中是在json数组里写好配置然后传入vueRouter对象，而React直接使用组件BrowserRouter（或HashRouter）和Route进行配置。

• ​ Route：路径和组件的对应关系。职责就是当页面的访问地址与 Route 上的 path 匹配时，就渲染出对应的组件

​ 如：

<BrowserRouter>
   <Route path="/" component={App}/>  
   <Route path="/About" component={About}/>  
</BrowserRouter>

5、路由的跳转

声明式导航

vue中使用Router-Link组件，react中使用 Link或NavLink 组件进行路由跳转导航

1)．Link：

主要属性是to，to可以接受string或者一个object，来控制url。

2)．NavLink：

它可以为当前选中的路由设置类名、样式以及回调函数等。to属性跳转路径activeClassName当元素处于活动状态时应用于元素的样式

编程式导航

this.props.history.push({pathname:'/about'})

补：路由展示

也是使用Route组件。即，Route组件既是路由配置，又是渲染组件的地方。

6、基本使用步骤：

1)、下载路由模块：

npm install --save react-router-dom

2)、创建若干个组件

创建components文件夹，并建立若干个组件

如：About.js，InBox.js，Goodslist，

3)、路由配置：

src/index.js
//引入模块
import { BrowserRouter, Route } from "react-router-dom";

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

4）、路由跳转

声明式导航

在App.js里做链接跳转

src/app.js

import { Link } from 'react-router-dom'

function App() {
  return (
    <div className="App">
       <ul>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/Inbox">Inbox</Link></li>
        </ul>
    </div>
  );
}

扩展：

可以尝试把 app.js里的 link 标签换成a标签。看看页面是不是会有闪动。

（PS：如果使用a标签，在每次点击时，页面被重新加载，<Link>标签会避免这种状况发生。当 你点击<Link>时，url会更新，组件会被重新渲染，但是页面不会重新加载）

二级路由

直接在InBox组件里在写路由配置就行：

<BrowserRouter>
    <Link to='/gla/Pencil' >铅笔</Link> &nbsp;|&nbsp;
    <Link to='/gla/Eraser' >橡皮</Link>
    <hr/>
    <Route path='/gla/Pencil' component={Pencil} />
    <Route path='/gla/Eraser' component={Eraser} />
</BrowserRouter>