React中的React Router：如何进行路由管理？

作者：yinqiong2023.07.25来源：Web前端之家浏览：2270评论:0

React Router 是 React 中一个非常重要的第三方库，用于实现应用的路由管理。在 React 中，我们可以通过切换不同的组件来实现页面的跳转和展示。而 React Router 则提供了更强大、灵活的路由管理功能，可以帮助我们构建复杂的单页应用。

React Router 简介

React Router 是由 React 团队提供的一个用于管理路由的库。它基于浏览器的 History API，可以实现 URL 与组件之间的映射关系。使用 React Router 可以帮助我们实现 SPA（单页应用），实现页面的无刷新跳转，提升用户体验。

React Router 提供了多种路由组件，比如 Route、Router、Switch、Link 等等，这些组件可以用来定义路由规则、渲染对应的组件、实现导航等功能。同时，React Router 还提供了强大的钩子函数，比如 withRouter、useParams 等，用于在组件中访问当前环境下的路由信息。

使用 React Router 实现路由管理

首先，我们需要在项目中安装 React Router。可以通过 npm 或 yarn 进行安装：

npm i -S react-router-dom

V5版本路由使用

声明式导航

使用Link或NavLink组件完成声明式导航的定义

代码展示：

import React, { Component } from 'react';
// 引入相关组件
import { Link,Route,Switch,NavLink } from 'react-router-dom'
// 引入类组件
import Home from './pages/Home';
import User from './pages/User';
 
class App extends Component {
    render() {
        return (
            <>
            {/* 声明式导航 */}
            
               < NavLink to={"/home"} >home页面</NavLink>
               < NavLink to={"/user"}>user页面</NavLink>
 
               <Switch>
               <Route path={"/home"} component = { Home }></Route>
               <Route path={"/user"} component = { User }></Route>
               </Switch>
            </>
        );
    }
}
 
export default App;

运行结果：

编程式导航

通过与react-router-dom中withRouter与history对象中的push/replace/go等方法搭配使用实现编程式导航功能。

这里需要注意，引入whitRouter，用于解决this.props.history 拿不到值的问题。

import React, { Component } from 'react';
// 引入相关组件
import { Link,Route,Switch,NavLink } from 'react-router-dom'
// 引入类组件
import Home from './pages/Home';
import User from './pages/User';
// 引入withRouter来解决 this.props.history 拿不到值的问题
import { withRouter } from 'react-router-dom'
@withRouter
class App extends Component {
    homeHander = () =>{
       console.log(this.props.history); 
       this.props.history.push("/home")
    }
    userHander = () =>{
        console.log(this.props.history); 
        this.props.history.push("/user")
     }
    render() {
        return (
            <>
            {/* 编程式导航 */}
               <a onClick={this.homeHander}>home界面</a>
               <a onClick={this.userHander}>user界面</a>
               <Switch>
               <Route path={"/home"} component = { Home }></Route>
               <Route path={"/user"} component = { User }></Route>
               </Switch>
            </>
        );
    }
}
 
export default App;