图文并茂React中路由的使用

jiezi

5 年前

相信很多刚学 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

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

新建一个 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>)
  }
}

根据我们上面写的路由，可知页面结构如下

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

然后我们在 app.js 中引入这个文件即可

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

如果你根据上面的内容操作完以后，你应该可以看到如下页面

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

在需要嵌套路由的地方，加上

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

然后再更改 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;

然后就可以在浏览器看到效果啦，可以看到 other 组件嵌套在了 about 里面

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

有时候，我们需要把 “/” 重定向到我们的主页，这样用户直接输入 ”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;

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

图文并茂React中路由的使用

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

2. 基础使用

3. 嵌套路由

4. 重定向

5. 结语