【图文并茂】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. 如果你根据上面的内容操作完以后,你应该可以看到如下页面

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

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

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里面

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

注意事项

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,一直引入一直报错,实属蛋疼。
如果有写错的地方,或者有更好的写法,欢迎给我留言~谢谢

    原文作者:李大雷
    原文地址: https://segmentfault.com/a/1190000019790930
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞