关于React路由

React路由精讲

最新推荐文章于 2025-05-05 18:02:33 发布

原创最新推荐文章于 2025-05-05 18:02:33 发布 · 240 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

我对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路由的基础使用

１．新建一个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里面

４．重定向

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