Question

尝试构建一个反应应用程序，反应路线中有“#”以导航到不同的部分，当我通过单击导航栏导航它们时工作正常，但是如果我使用 history.push('/home#aboutus') 这是导航到家，但没有移动到 aboutus 部分。如果我使用 history.push({pathname: "/home#home",userData: data}) 只有 URL 正在更新，屏幕为空。

PS: 将这个组件封装在 Router 的父组件中

请参考下面附上的代码。

<div>
      <div className={style.container}>
        <Header />
      </div>{" "}
      <Switch>
        <Route
          path="/package"
          exact
          render={(props) => {
            console.log("inside package");
            return <Package {...props} />;
          }}
        />
        <Route
          exact
          path="/home"
          render={(props) => {
            console.log("inside home");
            return (
              <React.Fragment>
                <div id="home">
                  <Home />
                </div>
                <div id="facility">
                  <Facility />
                </div>
                <div id="speciality">
                  <Special />
                </div>
                <div id="about">
                  <About {...props} />
                </div>
              </React.Fragment>
            );
          }}
        />
        <Route
          path="/specialties/:specality"
          exact
          component={(props) => {
            console.log("inside speciality");
            return <SpecialDetail {...props} />;
          }}
        />
        <Route exact path="/">
          <Redirect to="/home" />
        </Route>
      </Switch>

Answer 1

您可以使用 Link 组件，它支持使用 hash 导航到的 id 参数。

React路由器历史推送不适用于#

1 个答案: