如何在React Router中将根路径/重定向为/login并实现布局？

你需要的效果是访问根路径/时，自动等同于访问/login，同时保持AuthFrame布局不变。这里分两种常见的React Router版本给你解决方案：

方案一：React Router v5 及更早版本 #

在你的Auth.js中，给根路径添加一个重定向路由，具体修改如下：

return (
  <AuthFrame footerText={footerText} footerClick={footerClick}>
    {/* 根路径精确匹配，重定向到/login */}
    <Route exact path="/" render={() => <Redirect to="/login" />} />
    <Route path="/login" component={LoginContainer} />
    <Route path="/sign_up" component={SignUpContainer} />
  </AuthFrame>
);

关键说明： #

• 必须加上exact属性：确保只有访问精确的/路径时才触发重定向，不会影响/login、/sign_up这些子路径的匹配。
• 使用Redirect组件：它会在匹配到根路径时，自动跳转到/login，同时保持外层的AuthFrame布局不变，完美满足你的需求。

另外，你的App.js里的Route path="/" component={Auth}不需要加exact，这样Auth组件会在/、/login、/sign_up路径下都渲染，正好符合你要的布局复用逻辑。

方案二：React Router v6 版本 #

如果你的项目用的是最新的React Router v6，写法会有一些变化，需要用Routes和Navigate组件代替旧的API：

// Auth.js (React Router v6)
import { Routes, Route, Navigate } from 'react-router-dom';

return (
  <AuthFrame footerText={footerText} footerClick={footerClick}>
    <Routes>
      {/* 根路径跳转至/login，replace避免历史记录冗余 */}
      <Route path="/" element={<Navigate to="/login" replace />} />
      <Route path="/login" element={<LoginContainer />} />
      <Route path="/sign_up" element={<SignUpContainer />} />
    </Routes>
  </AuthFrame>
);

关键说明： #

• v6中必须用Routes包裹所有路由规则，替代了旧版的直接嵌套Route。
• 用element属性指定要渲染的组件，替代了component和render。
• Navigate组件替代了旧版的Redirect，加上replace属性可以让跳转不会在浏览器历史记录里留下/的条目，用户点击返回时不会回到空的根路径，体验更流畅。

这样修改后，访问/就会自动渲染LoginContainer，同时AuthFrame布局也会正常显示，完全符合你的需求～

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