React-Router-Dom v5 在首页加载时抛出 404答案

【问题标题】：React-Router-Dom v5 Throws 404 on first page loadReact-Router-Dom v5 在首页加载时抛出 404
【发布时间】：2020-04-05 01:08:55
【问题描述】：

我在使用 React-Router-Dom 时遇到了这个奇怪的问题。

如果用户直接去路由 - 除了 Home "/" 他们直接进入 404.html

如果用户直接转到注册或业务资料，他们会被定向到标准 404.html 页面

只有到了家之后，他们才能访问其他路线

<BrowserRouter>
      <Switch>
        <Route exact path="/" children={<Home />} />
        <Route path="/Signup" children={<Signup />} />
        <Route path="/NotFound" children={<NotFound />} />
        <Route path="/:businessProfileID" children={<BusinessProfile />} />
      </Switch>
    </BrowserRouter>

【问题讨论】：

标签： reactjs react-router react-router-dom

【解决方案1】：

您应该在 Route 中使用组件道具，而不是子道具：

<Route path="/Signup" component={Signup} />

notFound 页面不应该有路径，并且应该是最后一个路由，因为它应该充当后备。

<BrowserRouter>
  <Switch>
    <Route exact path="/" component={Home} />
    <Route path="/Signup" component={Signup} />
    <Route path="/:businessProfileID" component={BusinessProfile}
    <Route component={NotFound} />
  />
  </Switch>
</BrowserRouter>

应该可以的。

【讨论】：

【解决方案2】：

这是一个托管问题。

我正在使用 Firebase 托管。当我第一次运行firebase init 时，我没有选择single web page 选项。

所以所有其他路由都没有正确处理

我再次运行了 firebase init，它完成了工作

【讨论】：