React Router路由跳转后按钮残留显示的原因及解决方法

React Router 的路由切换渲染规则仅对<Routes>标签内部声明的路由组件生效，写在<Routes>外部的元素属于全局常驻内容，不会随路由切换被卸载。你的跳转按钮直接放在了<Routes>同级的位置，因此无论路由切换到哪个路径，按钮都会持续渲染显示。
另外你的代码存在两个额外问题：

• 仅配置了/login路径的路由，根路径/没有对应渲染内容
• 导入了未使用的Router组件，Login.js文件开头存在无效的[![字符，可能引发编译报错

你可以根据需求选择以下任意一种方案实现：

方案1：将按钮放到对应路由的组件内（推荐） #

把全局常驻的按钮移动到仅需要显示它的路由组件中，路由切换时对应的组件会被卸载，按钮自然不会在登录页显示。
修正后的App.js代码：

import Login from "./login";
import Home from "./Home";
import React from "react";
import "./App.css";
import { Routes, Route } from "react-router-dom";


function App() {
 return (
  <div className="Main">
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/login" element={<Login />} />
    </Routes>
  </div>
  );
}
export default App;

新增Home.js组件（存放仅首页显示的跳转按钮）：

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

export default function Home() {
  const navigate = useNavigate();
  const handleClick = () => {
    navigate("/login");
  }
  return (
    <div className="Home">
      <button onClick={handleClick} type="button">跳转到登录页</button>
    </div>
  )
}

修正后的Login.js（删除开头无效字符）：

import React from "react";

export default function Login() {
  return (
    <div className="Login">
      <h1>Login</h1>
    </div>
  )
}

方案2：根据当前路由路径条件渲染按钮 #

如果不想拆分组件，可以通过useLocation钩子获取当前访问路径，判断非登录页时再渲染按钮。
修正后的App.js代码：

import Login from "./login";
import React from "react";
import "./App.css";
import { Routes, Route } from "react-router-dom";
import { useNavigate, useLocation } from "react-router-dom";


function App() {
  const navigate = useNavigate();
  const location = useLocation();

  const handleClick = () => {
    navigate("/login");
  }

 return (
  <div className="Main">
    <Routes>
      <Route path="/" element={<div>首页</div>} />
      <Route path="/login" element={<Login />} />
    </Routes>
    {location.pathname !== "/login" && <button onClick={handleClick} type="button">跳转到登录页</button>}
</div>
  );
}
export default App;

内容的提问来源于stack exchange，提问作者Flightsy