React应用中React Router无法正常跳转问题求助

你使用了React Router的嵌套路由，但作为父路由组件的App没有添加<Outlet />——这是React Router专门用来渲染子路由内容的占位组件。点击跳转后地址栏变化，但子路由的Email组件没有对应的渲染位置，页面自然还是显示App里固定渲染的Language组件。

方案一：规范嵌套路由结构（推荐） #

这种方式符合React Router的设计逻辑，代码扩展性更强：

1. 修改App.js，导入Outlet并调整渲染逻辑：

import React, { useState, useEffect } from 'react';
import './App.css';
import { Outlet } from 'react-router-dom'; // 导入Outlet组件
import PreLoader from './components/PreLoader';

function App() {
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setIsLoading(false);
    }, 3000);
  }, []);

  return (
    <div>
      {isLoading ? <PreLoader /> : <Outlet />} {/* 用Outlet作为子路由内容的占位 */}
    </div>
  );
}

export default App;

2. 修改index.js的路由配置，将Language设为根路由的默认子路由：

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<App />}>
      <Route index element={<Language />} /> {/* 新增index路由，对应首页默认显示Language */}
      <Route path="email" element={<Email />} />
    </Route>
  )
)

方案二：在App中适配路由（快速调整） #

如果不想改动路由结构，也可以通过路由状态动态切换组件：

import React, { useState, useEffect } from 'react';
import './App.css';
import { useLocation } from 'react-router-dom'; // 导入useLocation获取当前路由
import Language from './screens/Language';
import Email from './screens/Email';
import PreLoader from './components/PreLoader';

function App() {
  const [isLoading, setIsLoading] = useState(true);
  const location = useLocation();

  useEffect(() => {
    setTimeout(() => {
      setIsLoading(false);
    }, 3000);
  }, []);

  if (isLoading) {
    return <PreLoader />;
  }

  // 根据当前路径渲染对应组件
  if (location.pathname === '/email') {
    return <Email />;
  }
  return <Language />;
}

export default App;

方案一更推荐，它通过Outlet解耦了父路由和子路由的渲染逻辑，后续新增路由只需在路由配置中添加即可，无需修改App组件；方案二更适合临时快速调整，但路由逻辑耦合在App中，长期维护性较差。

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