[JavaScript知识库]React入门（七）

一、路由

路由的作用（实现组件间的跳转）相信大家都清楚了，在react里同样有路由，今天简单介绍一下路由的基本使用。

1.1、作用

在SPA（单页面应用）里，实现组件（页面）跳转。

1.2、路由模块

react-router提供了两种路由模块，我们常用第二种。

1)．React-Router：

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

2)．React-Router-DOM：

提供了 BrowserRouter,HashRouter , Route, Link等 API,我们可以通过 DOM 的事件控制路由。如点击按钮。

1.3、路由模式

react里同样有两种路由模式。类似于vue中的hash和history。

1)．HashRouter组件：

路径上有"#"

2)．BrowserRouter组件：

路径上没有"#"

注意：
整个项目中，写一个BrowserRouter 标签就行，否则，react路由时，不能正常渲染，需要刷新，才能渲染。

1.4、和vue路由的对比

1.5、路由配置

1）Route组件:

路由配置就写在组件内部，任何组件都可以写。

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

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

? 如：

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

2）显示:

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

1.6、路由的跳转

• 声明式导航

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

1)．Link：

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

<Link to="/About">去About</Link>
<Link to={pathname:'/about'}>去About</Link>

2)．NavLink：

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

<NavLink to="/About" activeClassName="red">去About</NavLink>
<NavLink to={pathname:'/about'} activeClassName="red">去About</NavLink>

• 编程式导航

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

1.7、基本使用步骤

1)、下载路由模块：

npm install --save react-router-dom

2)、创建若干个组件

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

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>
  );
}

注意：

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

1.8、二级路由

直接在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>