React路由：访问不存在路径时如何保持URL不被替换？

你的useEffect逻辑是无条件重定向——只要检测到有authToken就强制跳转到/gallery，没有就跳转到/，完全无视用户当前访问的路径。所以哪怕用户输入了错误路径，这个逻辑也会立刻修改地址栏，只是因为路由的/*规则匹配到了404组件，才显示404内容，但地址已经被改掉了。

调整重定向逻辑，让它只在特定场景触发，而非全局无条件执行：

1. 引入useLocation获取当前路由路径，判断是否需要重定向
2. 重定向规则改为：
   • 已登录（有authToken）：仅当用户访问根路径/时，才跳转到/gallery
   • 未登录：仅当用户访问需要权限的页面（比如/gallery）时，才跳转到登录页/
3. 修正useEffect的写法：不要把push作为返回值（这会变成组件卸载时的清理函数），直接调用history.push即可

修改后的App.js代码：

import { useHistory, useLocation, Router, Switch, Route } from 'react-router-dom';
// 记得导入你的组件：Home, Grid, Support, FaqComp, Prizes, PastWinners, PageNotFound

function App() {
  const history = useHistory();
  const location = useLocation();
  const authToken = localStorage.getItem('token');

  useEffect(() => {
    if (authToken !== null) {
      // 已登录状态：只有访问根路径时才跳转至gallery
      if (location.pathname === '/') {
        history.push('/gallery');
      }
    } else {
      // 未登录状态：访问受保护页面时跳转至登录页
      const protectedPaths = ['/gallery'];
      if (protectedPaths.includes(location.pathname)) {
        history.push('/');
      }
    }
  }, [authToken, location.pathname, history]);

  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/gallery" component={Grid} />
        <Route path="/support" component={Support} />
        <Route path='/faq' component={FaqComp} />
        <Route path='/prizes' component={Prizes} />
        <Route path='/past-winners' component={PastWinners} />
        <Route path="/*" component={PageNotFound} />
      </Switch>
    </Router>
  );
}

export default App;

修改后，当用户输入错误路径（比如http://127.0.0.1:8000/sdfoijifoifs），不管是否登录，只要当前路径不在重定向规则里，地址栏就会保留输入的错误URI，同时路由会匹配到/*规则，正确显示404页面内容。

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