如何在react-router v6中实现点击按钮渲染全新独立页面而非嵌套渲染

你当前把<Router>和路由匹配规则都写在了Intro组件内部，匹配/login路径时，Login组件只会渲染在Intro内部的<Routes>占位位置，外层的Header、Shelf组件都会保留，自然就出现了嵌套渲染的效果。要实现独立登录页，只需要把路由配置提到应用最外层，和首页路由平级即可。

步骤1：调整App.js，全局配置路由 #

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Header from "./components/Header";
import Intro from "./components/Intro";
import Shelf from "./components/Shelf";
import Login from "./components/Login";
import Signup from "./components/Signup";

function App() {
  return (
    <Router>
      <Routes>
        {/* 首页路由，渲染完整落地页内容 */}
        <Route path="/" element={
          <div>
            <Header />
            <Intro />
            <Shelf />
          </div>
        } />
        {/* 独立登录、注册页路由，和首页平级，不会渲染首页其他内容 */}
        <Route path="/login" element={<Login />} />
        <Route path="/signup" element={<Signup />} />
      </Routes>
    </Router>
  );
}

export default App;

步骤2：精简Intro组件，移除内部路由配置 #

现在全局已经配置了路由规则，Intro组件只需要保留跳转链接即可：

import React from 'react';
import { Link } from 'react-router-dom';

function Intro() {
  return (
    <div className="hero">
        <div className="overlay column ai-center js-center">
            <h1 className="m-0 fs-large"><em>Welcome to Furns</em></h1>
            <hr />
            <p className="m-0 fs-small">Worlwide known company serves the best furnitures</p>
            <div className="row mt-4">
                <Link to="/login">
                    <button className="login-btn-large px mx-3">Login</button>
                </Link>
                <Link to="/signup" >
                    <button className="sign-up-btn">Sign-up</button>
                </Link>
            </div>
        </div>
    </div>
  );
}

export default Intro;

可选优化：给登录页添加取消跳转逻辑 #

点击Login组件的取消按钮可以直接跳转回首页：

import React from 'react';
import { useNavigate } from 'react-router-dom';

function Login() {
  const navigate = useNavigate();
  const handleCancel = () => {
    navigate('/');
  }

  return (
        <div className="float shadow bg-light px-3 py-3 ai-center js-between">
            <h2 className="brand color-olive">Furns</h2>
            <h1 className="color-olive">Login</h1>
            <form className="column">
                <label htmlFor="username" className="color-olive my-1"> Username</label>
                <input id="username" type="text" className="txt-box" />

                <label htmlFor="password" className="color-olive my-1">Password </label>
                <input id="password" type="password" className="txt-box" />


                <button type="submit" className="mt-4 olive login-btn-large">Login</button>
                <button type="button" className="my-1 olive bg-light btn-cancel" onClick={handleCancel}>Cancel</button>
            </form>
        </div>
  );
}

export default Login;

内容的提问来源于stack exchange，提问作者weak-coder