如何在React Router中返回根路径"/"？

我来帮你完成这个路由逻辑的实现，咱们用目前主流的React Router v6版本来编写代码，步骤清晰易懂：

1. 先安装必要依赖 #

首先确保你的项目里已经安装了react-router-dom：

npm install react-router-dom
# 如果你用yarn的话
yarn add react-router-dom

2. 编写完整的App.js代码 #

下面是满足你需求的完整代码，我会在代码里加注释说明关键逻辑：

import { BrowserRouter as Router, Routes, Route, Link, useLocation } from 'react-router-dom';

// 先定义About组件，就是你要在/about路径显示的内容
function About() {
  return <div>
    <h2>About页面内容</h2>
    <p>这里是About组件的具体内容</p>
  </div>;
}

// 定义Home组件，根据当前路径动态渲染内容
function Home() {
  // 用useLocation钩子获取当前的路由路径
  const currentPath = useLocation().pathname;

  return (
    <div className="home-content">
      {/* 根据当前路径判断渲染内容 */}
      {currentPath === '/' ? (
        <Link to="/about">
          <button>跳转到About页面</button>
        </Link>
      ) : (
        <About />
      )}
    </div>
  );
}

function App() {
  return (
    <Router>
      <div className="app-container">
        {/* 始终保留的返回首页按钮，不管当前路径是什么都会显示 */}
        <Link to="/">
          <button>Go to home</button>
        </Link>
        <hr />
        {/* 顶层路由配置 */}
        <Routes>
          {/* 把"/"和"/about"都映射到Home组件，因为逻辑都在Home里处理 */}
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<Home />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

关键逻辑说明 #

• 用useLocation钩子获取当前路由的路径，让Home组件可以根据路径动态切换渲染内容：
  • 当路径为/时，显示跳转到/about的按钮链接
  • 当路径为/about时，直接渲染About组件
• 顶层路由里同时配置/和/about指向Home组件，这样所有路径判断逻辑都集中在Home里，符合你的需求
• 返回首页的按钮会始终固定在页面顶部，不管当前处于哪个路由路径

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