React导航后页面内容不显示问题求助

我正在学习React，已将App.js作为登录页，通过react-router-dom的Navigate组件尝试导航至App2.js，导航流程已执行，但看不到App2.js的页面内容。以下是相关代码、项目文件结构及页面输出截图：

相关代码 #

App.js #

import React from "react";
import "./App.css";
import { Navigate } from "react-router-dom";

function App() {
  const [goToContact, setGoToContact] = React.useState(false);
  if (goToContact) {
    return <Navigate to="/App2" />;
  }
  return (
    <div className="LoginPage">
      <div className="topnav">
        <h1 className="Heading">E-Commerce App</h1>
      </div>
      <div className="card">
        <div className="container">
          <h1 className="SignUp">Sign Up</h1>
          <form>
            <label for="email" className="email">
              <b>Email</b>
            </label>
            <br />
            <input type="email" name="email" placeholder="Enter your email" />
            <br />
            <label for="psw" className="Password">
              <b>Password</b>
            </label>
            <br />
            <input
              type="password"
              name="Password"
              placeholder="Enter your password"
            />
            <br />
            <label for="psw-repeat">
              <b>Repeat Password</b>
            </label>
            <br />
            <input
              type="password"
              name="Repeat Password"
              placeholder="Repeat Password"
            />
            <br />
            <input type="checkbox" name="Remember Me" className="remember" />
            <label for="vehicle1"> Remember Me</label>
            <br />
            <div class="clearfix">
              <button
                type="button"
                class="cancelbtn"
                onClick={() => {
                  setGoToContact(true);
                }}
              >
                Login
              </button>
              <button type="submit" class="signupbtn">
                Sign Up
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
}

export default App;

App2.js #

import React from "react";

function App2() {
  return (
    <div>
      <h1>Hello</h1>
    </div>
  );
}

export default App2;

项目文件结构及页面截图 #

• 项目文件结构：
• App.js页面输出：

问题原因及解决方法 #

问题根源 #

只使用Navigate组件跳转路径，但没有在React Router中配置/App2对应的路由规则，导致React Router无法识别该路径对应的组件，因此页面无内容显示。

解决步骤 #

1. 确保安装react-router-dom
   如果还没安装，执行以下命令：

   npm install react-router-dom
   # 或
   yarn add react-router-dom
   

2. 配置路由规则（修改index.js）
   在项目的根渲染文件（通常是index.js）中，用BrowserRouter包裹路由，并通过Routes和Route定义路径与组件的映射：

   import React from 'react';
   import ReactDOM from 'react-dom/client';
   import { BrowserRouter, Routes, Route } from 'react-router-dom';
   import App from './App';
   import App2 from './App2';
   
   const root = ReactDOM.createRoot(document.getElementById('root'));
   root.render(
     <BrowserRouter>
       <Routes>
         {/* 根路径渲染App登录页 */}
         <Route path="/" element={<App />} />
         {/* /App2路径渲染App2组件 */}
         <Route path="/App2" element={<App2 />} />
       </Routes>
     </BrowserRouter>
   );
   

3. 验证效果
   重新启动项目，点击Login按钮后，就能成功跳转到显示Hello的App2页面了。

额外注意 #

• 路径名称可自定义，只要Navigate的to属性值与Route的path属性值保持一致即可；
• 确保App2组件已正确导出，你的代码中这部分是没问题的。

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