React Router 触发具有历史记录的路由

Question

我正在尝试执行一个非常基本的路由过程，我有一个主页，在这个主页上单击按钮时我会被重定向到下一页。我有 3 个组件 - “App、HomePage 和 NextPage”。我正在使用一个历史对象来推送新的 URL，这部分工作。

但是，我不确定如何实际调用新路由（例如让 App 组件渲染新路由。我的代码如下：

    export default function App() {

      return (
        <Router>
          <div>
            <Switch>
             <Route path="/">
               <HomePage/>
             </Route>
              <Route path="/nextpage">
                <NextPage/>
              </Route>
            </Switch>
          </div>
        </Router>
      );
    }

    function HomePage () {
      let history = useHistory();

      function handleClick() {
        history.push("/nextpage");
      }

      return (
        <div>this is the home page
          <button type="button" onClick={handleClick}>Display next page</button>
        </div>
      )
    }
    export default withRouter(HomePage);


    function NextPage () {
      return (
        <div>You just arrived to the next page!</div>
      )
    }

    export default NextPage;

知道我错过了什么步骤吗？我已经阅读了文档，但我不清楚究竟是谁触发了 NextPage 组件上的渲染，因为单击该按钮只会修改历史对象。

Answer 1

我明白了！您的代码未呈现下一页，因为主页的条件仍然为真，请尝试将 "exact" 添加到您的第一条路线，如下所示：

<Route exact path="/">
           <HomePage/>
</Route>

那是因为当您使用 Switch 时，它会在第一个路由条件 returns 为真时呈现，并会停在那里。一些参考：https://reacttraining.com/react-router/core/api/Prompt 编码愉快！ :D 欢迎来到 Stack Overflow!!!

React Router 触发具有历史记录的路由

React Router triggering a route with history

url-routing

reactjs

react-router