【前端知识】React 基础巩固(四十)—

这篇具有很好参考价值的文章主要介绍了【前端知识】React 基础巩固(四十)——Navigate导航。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

React 基础巩固(四十)——Navigate导航

一、Navigate的基本使用

新建Login页面，在Login中引入Navigate，实现点击登陆按钮跳转至/home路径下：

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>
        {!isLogin ? (
          <button onClick={(e) => this.login()}>登陆</button>
        ) : (
          <Navigate to="/home" />
        )}
      </div>
    );
  }
}

export default Login;

当路由均无匹配时，通过Navigate跳转至NotFound界面，其中*为通配符：

构建NotFound.jsx

import React, { PureComponent } from 'react'

export class NotFound extends PureComponent {
  render() {
    return (
      <div>
        <h1>Not Found Page</h1>
        <p>路径不存在，请检测之后再操作。</p>
      </div>
    )
  }
}

export default NotFound

在App.jsx中配置NotFound：

import React, { PureComponent } from "react";
import { Route, Routes, NavLink, Navigate } from "react-router-dom";
import "./style.css";
import Home from "./pages/Home";
import About from "./pages/About";
import Login from "./pages/Login";
import NotFound from "./pages/NotFound";

export class App extends PureComponent {
  render() {
    return (
      <div className="app">
        <div className="header">
          <span>header</span>
          <div className="nav">
            <NavLink to="/home">首页</NavLink>
            <NavLink to="/about">关于</NavLink>
            <NavLink to="/login">登陆</NavLink>
          </div>
          <hr />
        </div>
        <div className="content">
          {/* 映射关系： path => Component */}

          <Routes>
            <Route path="/" element={<Navigate to="/home" />} />
            <Route path="/home" element={<Home />} />
            <Route path="/about" element={<About />} />
            <Route path="/login" element={<Login />} />
            <Route path="*" element={<NotFound />} />
          </Routes>
        </div>
        <div className="footer">Footer</div>
      </div>
    );
  }
}

export default App;

二、路由嵌套和配置

构建Home的子路由页面：

HomeRecommend.jsx

import React, { PureComponent } from 'react'

export class HomeRecommend extends PureComponent {
  render() {
    return (
      <div>
        <h2>Banner</h2>
        <h2>歌单列表</h2>
        <ul>
            <li>歌单1</li>
            <li>歌单2</li>
            <li>歌单3</li>
        </ul>
      </div>
    )
  }
}

export default HomeRecommend

HomeRanking.jsx

import React, { PureComponent } from 'react'

export class HomeRanking extends PureComponent {
  render() {
    return (
      <div>
        <h2>Ranking Nav</h2>
        <h2>榜单数据</h2>
        <ul>
            <li>歌曲数据1</li>
            <li>歌曲数据2</li>
            <li>歌曲数据3</li>
            <li>歌曲数据4</li>
            <li>歌曲数据5</li>
        </ul>
      </div>
    )
  }
}

export default HomeRanking

利用Route嵌套子路由，实现Home页面下的子路由切换：

import React, { PureComponent } from "react";
import { Route, Routes, NavLink, Navigate } from "react-router-dom";
import "./style.css";
import Home from "./pages/Home";
import About from "./pages/About";
import Login from "./pages/Login";
import NotFound from "./pages/NotFound";
import HomeRecommend from "./pages/HomeRecommend";
import HomeRanking from "./pages/HomeRanking";

export class App extends PureComponent {
  render() {
    return (
      <div className="app">
        <div className="header">
          <span>header</span>
          <div className="nav">
            <NavLink to="/home">首页</NavLink>
            <NavLink to="/about">关于</NavLink>
            <NavLink to="/login">登陆</NavLink>
          </div>
          <hr />
        </div>
        <div className="content">
          {/* 映射关系： path => Component */}

          <Routes>
            <Route path="/" element={<Navigate to="/home" />} />
            <Route path="/home" element={<Home />} >
              // 当一开始进入/home时，Home中的子页面默认展示recommend页面
              <Route path="/home" element={ <Navigate to="/home/recommend" />}/>
              <Route path="/home/recommend" element={ <HomeRecommend/>}/>
              <Route path="/home/ranking" element={ <HomeRanking/>}/>
            </Route>
            <Route path="/about" element={<About />} />
            <Route path="/login" element={<Login />} />
            <Route path="*" element={<NotFound />} />
          </Routes>
        </div>
        <div className="footer">Footer</div>
      </div>
    );
  }
}

export default App;