【图文并茂】React中路由的使用

1.react-router和react-router-dom有什么区别？

相信不少刚学react的朋友都会和我同样，在使用react来建立路由的时候，发现官网上写的是

import *** from 'react-router';

而后百度看了不少博客文章 ，发现是

import *** from '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的依赖，所以咱们在安装的时候只须要安装后者便可。

npm install react-router-dom --save

2.基础使用

注意：这里使用的是BrowserRouter的路由模式。请根据你的须要选择不一样模式。
各类模式区别请看 react-router中文文档 ，这里不作赘述

1. 新建一个Router.js文件，至于在哪里新建，你喜欢就好。

   //引入react jsx写法的必须
   import React from 'react'; 
   //引入须要用到的页面组件 
   import Home from './pages/home';
   import About from './pages/about';
   //引入一些模块
   import { BrowserRouter as Router, Route} from "react-router-dom";
   
   function router(){
   return (
   <Router>
       <Route path="/home" component={Home} />
       <Route path="/about" component={About} />
   </Router>);
   }
   
   export default router;

   这里是home组件

   //home.js
   import React, { Component } from 'react';
   
   export default class Home extends Component {
     render() {
       return (<h1>
         欢迎，这里是Home
       </h1>)
     }
   }

   这里是about组件

   //about.js
   import React, { Component } from 'react';
   
   export default class About extends Component {
     render() {
       return (<h1>
         欢迎，这里是About
       </h1>)
     }
   }

2. 根据咱们上面写的路由，可知页面结构以下

   |
   |--home
   |--about
   //那么localhost:3000/home  就会渲染home组件（若是你的项目是react脚手架默认生成的项目）
   //localhost:3000/about 就会渲染about组件

3. 而后咱们在app.js中引入这个文件便可

   import Router from './Router'
   class App extends React.Component {
   render(){
   return (
     <Router />
   );
   }
   }

4. 若是你根据上面的内容操做完之后，你应该能够看到以下页面

3.嵌套路由

当咱们须要页面的局部变换的时候，就须要用到这个了。好比说标题栏不变，内容根据路由地址引入不一样的模块~

1. 在须要嵌套路由的地方，加上

   {this.props.children}  //这里就是嵌套路由展现的地方

   好比咱们如今要给about加一个子路由other
   那么咱们首先须要改写about.js文件

   //about.js
   import React, { Component } from 'react';
   
   export default class About extends Component {
     render() {
       return (<h1>
         欢迎，这里是About
         {this.props.children}  //这里就是嵌套路由展现的地方
       </h1>)
     }
   }

2. 而后再更改router.js路由文件

   //前面的引入就省略了，查看上一章节便可
   //新引入一个ohter组件，用于渲染嵌套路由,other内容和前面的home.js同样
   import Ohter from './pages/other';
   
   function router(){
   return (
   <Router>
       <Route path="/home" component={Home} />
       <Route path="/about" render={()=>(
         <About>
           <Route path="/about/other" component={Other} />
         </About>
       )}>
       </Route>
   </Router>);
   }
   export default router;

3. 而后就能够在浏览器看到效果啦，能够看到other组件嵌套在了about里面

注意事项
1/ render={()=>对象} 这里的对象不须要大括号噢，若是你熟悉箭头语法的话，那么应该不用我多说
2/ 拥有子路由的路由不能添加 exact属性，否则会没法访问到子组件

4.重定向

有时候，咱们须要把 "/" 重定向到咱们的主页，这样用户直接输入"www.***.com"就能够了，而不用输入"www.***.com/home"。

//router.js
//须要import一下Redirect
import {Redirect} from "react-router-dom";

return (
<Router>
    <Route path="/home" component={Home} />
    <Route path="/" render={
      ()=> (
      <Redirect to="/home"/>)}>
    </Route>
</Router>);
}
export default router;

5.结语

我也是刚学react 2天，而后整这个路由整1小时才整明白，官方中文文档的有些东西好像过时了，像IndexRoute，一直引入一直报错，实属蛋疼。若是有写错的地方，或者有更好的写法，欢迎给我留言~谢谢