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;

React Router Dom Redirect需要刷新页面才能工作

1 个答案: