Question

因此，在我的项目中，我有两条路由，一条是根路由，另一条是 /game 路由。而我总是希望用户从根路由开始，因为用户需要在移动到 /game 路由之前设置一个强制状态变量。

但是如果用户在游戏路线上刷新页面，我想重定向到根路线。所以我想要的是我的应用程序的入口点始终是根路由。

        <Router>
          <Route path="/">
            <Redirect to="/" />
          </Route>
          <Route exact path="/" render={() => <Home setLevel={setLevel} />}></Route>
          <Route exact path="/game" render={() => <Game level={level} />}></Route>
        </Router>

上面的设置适用于 localhost，但是当我在 Netlify 上部署我的应用程序时它不起作用。因此，如果用户在 /game 路线上刷新页面，则会显示未找到页面。

这是完整的代码

import { useState } from "react";
import {
  BrowserRouter as Router,
  Link,
  Redirect,
  Route,
} from "react-router-dom";

const Home = ({ setLevel }) => {
  return (
    <>
      <h1>Choose Difficulty</h1>
      <ul>
        <li onClick={() => setLevel("easy")}>Easy</li>
        <li onClick={() => setLevel("hard")}>Hard</li>
      </ul>
      <Link to="/game">Play</Link>
    </>
  );
};

const Game = ({ level }) => {
  return (
    <>
      <h1>Welcome to the game</h1>
      <p>Your level is {level}</p>
    </>
  );
};

const App = () => {
  const [level, setLevel] = useState(null);
  return (
    <Router>
      <Route path="/">
        <Redirect to="/" />
      </Route>
      <Route exact path="/" render={() => <Home setLevel={setLevel} />}></Route>
      <Route exact path="/game" render={() => <Game level={level} />}></Route>
    </Router>
  );
};

export default App;

Answer 1

我没有仔细研究过您的 React 设置，但您可能只是缺少一个用于 Netflify 部署的 _redirects 文件：https://docs.netlify.com/routing/redirects/#syntax-for-the-redirects-file

react-router-dom 是客户端路由器，因此当 Netlify 使用服务器端渲染加载页面时（即，当您第一次刷新或访问页面时，这不是客户端重定向），它不能在服务器上找到路由。添加 _redirects 文件将指导 Netlify 如何在初始加载时提供您的页面。

Answer 2

假设当用户刷新页面时，状态 level 再次变为 null。然后更新您的代码如下：

const Game = ({ level }) => {
  // add a guard right here
  if (!level) {
    return <Redirect to="/"/>;
  }
  return (
    <>
      <h1>Welcome to the game</h1>
      <p>Your level is {level}</p>
    </>
  );
};

const App = () => {
  const [level, setLevel] = useState(null);
  return (
    <Router>
      { /* remove this code
      * <Route path="/">
      * <Redirect to="/" />
      * </Route>
      */ }
      <Route exact path="/" render={() => <Home setLevel={setLevel} />}></Route>
      <Route exact path="/game" render={() => <Game level={level} />}></Route>
    </Router>
  );
};

如果用户在 REACT ROUTER 中的任何其他路由上刷新页面，如何将用户重定向到根路由？

2 个答案: