react【六】 React-Router 路由

KIKIo_

已于 2024-02-15 14:13:12 修改

阅读量1.3k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： react 文章标签： react.js javascript 前端

于 2024-02-13 21:42:18 首次发布

本文链接：https://blog.csdn.net/weixin_46738453/article/details/136108024

本文详细介绍了如何在React应用中使用React-Router进行路由管理，包括基本路由、Link和NavLink的用法、Navigate的实现、NotFound页面配置、路由的嵌套、动态参数传递以及懒加载和配置文件的运用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

1、Router

1、Router

1.1 路由

在这里插入图片描述

1.2 认识React-Router

npm install react-router-dom

在这里插入图片描述

1.3 Link和NavLink

在这里插入图片描述

1.4 Navigate

在这里插入图片描述

import React, {
   
    PureComponent } from "react";
import {
   
    Navigate } from "react-router-dom";

export class Login extends PureComponent {
   
   
  constructor(props) {
   
   
    super(props);

    this.state = {
   
   
      isLogin: false,
    };
  }

  login() {
   
   
    this.setState({
   
    isLogin: true });
  }

  render() {
   
   
    const {
   
    isLogin } = this.state;

    return (
      <div>
        <h1>Login Page</h1>
        {
   
   /* 如果没有登录的话显示登录按钮
            已经登录则跳转到/home页面 */}
        {
   
   !isLogin ? (
          <button onClick={
   
   (e) => this.login()}>登录</button>
        ) : (
          <Navigate to="/home" />
        )}
      </div>
    );