共计 2507 个字符,预计需要花费 7 分钟才能阅读完成。
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 中文文档,这里不做赘述
-
新建一个
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 />); } }
- 如果你根据上面的内容操作完以后,你应该可以看到如下页面
3. 嵌套路由
当我们需要页面的局部变换的时候,就需要用到这个了。比如说标题栏不变,内容根据路由地址引入不同的模块~
-
在需要嵌套路由的地方,加上
{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 属性,不然会无法访问到子组件
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,一直引入一直报错,实属蛋疼。
如果有写错的地方,或者有更好的写法,欢迎给我留言~ 谢谢