React Router Dom 重定向需要刷新页面才能工作

Question

我正在使用 react-router-dom，我在重定向时遇到了奇怪的行为。我正在尝试从 / 重定向到 /something。所以我用了：

        <Switch>
            <Redirect
                exact
                from='/'
                to='/something'
            />
            <Route
                component={Garden}
                exact
                path='/something'
            />
        </Switch>

当我打开 localhost:3000/ 时，我被重定向到 localhost:3000/something 但页面是空白的。当我刷新页面或直接访问 /something 时，页面显示正常。

当我使用 react-router-hash-link 处理锚标签时，会发生类似的行为。将滚动设置为平滑滚动时，我可以看到页面平滑滚动，但一旦到达标签，页面就会变成空白。为了让它工作，我需要刷新页面，这很不方便。

谢谢，

Answer 1

您在问题中显示的代码块看起来不错。

您可能没有正确配置路由器。

See working demo here I created here 使用您的 switch 代码。检查路由器配置并将其应用于您的代码库。

路由器

import {
  BrowserRouter as Router,
  Route,
  Switch,
  Redirect
} from "react-router-dom";
import Home from "./Home";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Router>
        <Nav />
        <Switch>
          <Redirect exact from="/" to="/something" />
          <Route component={Home} exact path="/something" />
        </Switch>
      </Router>
    </div>
  );
}

分量

const Home = props => {
  const [val, setVal] = useState();
  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(res => res.json())
      .then(res => res.map(user => user.username))
      .then(userNames => setVal(userNames));
  });
  return <div>Home - {val}</div>;
};

export default Home;