我对React中路由理解的几个观点:
(1):react-router和react-router-dom有什么区别?
(2):react路由的基本使用
(3):嵌套路由
(4):重定向
(5):结语
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.React路由的基础使用
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 />
);
}
}
3.嵌套路由
当我们需要页面的局部变换的时候,就需要用到这个了。比如说标题栏不变,内容根据路由地址引入不同的模块~
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>)
}
}
3.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.3然后就可以在浏览器看到效果啦,可以看到other组件嵌套在了about里面
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 没几天天,然后整这个路由整了好长才整明白,有些东西属实不太精通,一直引入一直报错,实属蛋疼。 如果有写错的地方,或者有更好的写法,欢迎给我留言~ 谢谢~