React HashRouter 无法从主页重定向到辅助页面

Question

我想设置从主页“/”到某个默认子页面的重定向。我的示例代码如下：

function FakeAdmin() {
  return(
    <div>
      Admin<br/>
      <a href="#/dashboard">Dashboard</a><br/>
      <a href="#/anything-else">Anything else</a><br/>

      <Switch>
        <Route path="/dashboard">
          <p>DASHBOARD</p>
        </Route>
        <Route path="/anything-else">
          <p>ANYTHING ELSE</p>
        </Route>
      </Switch>
    </div>
  )
}

ReactDOM.render(
  <HashRouter>
    <Switch>
      <FakeAdmin/>
      <Redirect from="/" to="/dashboard" />
    </Switch>
  </HashRouter>,
  document.getElementById("root")
)

我希望当我访问此页面“/”时，它应该自动重定向到“/#/dashboard”位置。但事实并非如此。只能通过单击伪导航链接。我做错了什么？

Answer 1

你的问题是，你将 FakeAdmin 和 Redirect 包装在一个 Switch 中，因此当 FakeAdmin 被渲染时，Switch 停止渲染其子项中的任何其他内容.您不需要开关，而是使用 React.Fragment

ReactDOM.render(
  <HashRouter>
    <React.Fragment>
      <FakeAdmin/>
      <Redirect from="/" to="/dashboard" />
    </React.Fragment>
  </HashRouter>,
  document.getElementById("root")
)

React HashRouter 无法从主页重定向到辅助页面

React HashRouter can not redirect from main page to a sup-page

reactjs

react-router-dom