直接访问 URL 时 React 路由器不渲染路由

Question

考虑这是主要的 App 组件（为简洁起见省略了导入）：

const App = () => {
    const [orderRoutes, setOrderRoutes] = useState([])

    const updateOrderRoutes = (newRoute) => {
        orderRoutes.push(newRoute)
        setOrderRoutes(orderRoutes)
    }

    const renderedOrderRoutes = orderRoutes.map(route => {
        return (
            <Route
                path={`/${route.class}/${route.order}`}
                exact
                key={`/${route.class}/${route.order}`}
            >
                <CatalogPage />
            </Route>
        )
    })

    return (
        <BrowserRouter>
            <Header
                updateOrderRoutes={updateOrderRoutes}
            />
            <Route path="/" exact component={Home} />
            <Route path="/aboutus" exact component={AboutUs} />
            <Route path="/faq" exact component={Faq} />
            <Route path="/register" exact component={Register} />
            {renderedOrderRoutes}
            <Footer />
        </BrowserRouter>
    )
}

export default App

挑战在于，在渲染初始 App 组件时，某些路由是未知的。当<Header> 组件中的 AJAX 请求得到响应时，它们将被知道。然后，标头会将新路由更新到 orderRoutes 状态属性，每次都重新渲染 App 组件。作为 AJAX 调用结果的路由（在 <Header> 中生成）然后被渲染到 <BrowserRouter>（在 {renderedOrderRoutes} 中）。在<Header> 中，由于相同的 AJAX 调用而呈现的每个路由都有一个<Link>，因此每个菜单条目（<Link>s）都会有一个对应的路由。

这很好用，但是当我访问此机制直接生成的 URL 之一（例如：刷新页面）时，<CatalogPage> 组件不会呈现。

因此，例如，假设 AJAX 调用产生了一堆路由，其中​​一个是 /t-shirts/tanktops。我将获得一个菜单条目，其中包含指向该路径的链接。当我单击该菜单项时，将呈现 <CatalogPage> 组件。但是当我直接访问/t-shirts/tanktops 时，<CatalogPage> 组件并没有呈现出来。

如何更改此代码以使作为 AJAX 调用结果的 URL 可直接访问？

编辑

好的，我通过在<Link>s 之一通过在App 组件上创建未使用的状态来单击时强制<App> 组件重新渲染来“解决”这个问题（不喜欢它）叫activeOrderRoute。我将 setter 作为 prop 传递给 Header，并将它作为回调连接到为响应 AJAX 请求而创建的每个 Link 的 onClick 处理程序。这实质上迫使App 重新渲染和渲染路线，这解决了我的问题。

不过，这似乎不是正确的方法，因此我们将不胜感激。

Answer 1

React 路由器并不直接支持所有 URL 的路由。它仅捕获默认域，仅在客户端完成剩余路由并且不提供请求。 如果你的域是www.mydomain.com，你不能直接在react路由器中访问URLwww.mydomain.com/info。 解决方案：

1. 您可以使用哈希路由器，但这会使 URL 对 SEO 不友好
2. 您可以设置一条包罗万象的路线并自行安排路线

这个链接可以帮助你 https://ui.dev/react-router-cannot-get-url-refresh/

Answer 2

您需要修改您的 webpack.config.js 并添加以下行。

module.exports = {
  devServer: {
    historyApiFallback: true,
  },
  ...

Answer 3

与其尝试为每个异步获取的路由显式渲染路由，不如利用 react-router-dom 的强大功能并渲染可以处理任何目录页面的动态路由 path string。

而不是这个：

const renderedOrderRoutes = orderRoutes.map(route => {
  return (
    <Route
      path={`/${route.class}/${route.order}`}
      exact
      key={`/${route.class}/${route.order}`}
    >
      <CatalogPage />
    </Route>
  )
})

return (
  <BrowserRouter>
    <Header
      updateOrderRoutes={updateOrderRoutes}
    />
    <Route path="/" exact component={Home} />
    <Route path="/aboutus" exact component={AboutUs} />
    <Route path="/faq" exact component={Faq} />
    <Route path="/register" exact component={Register} />
    {renderedOrderRoutes}
    <Footer />
  </BrowserRouter>
)

在您的 Router 中呈现单个动态路由。使用Switch，因此只有一个路由组件被匹配和渲染。重新排序路线，以便更具体的路径可以匹配之前不太具体的路径。现在，当 URL 的路径具有 "/someClass/someOrder" 形状时，可以在尝试匹配任何更通用的路径之前对其进行匹配。您将看到主路径 ("/") 最后匹配，并且重新排序允许我们删除所有路由上的 exact 属性。

return (
  <BrowserRouter>
    <Header updateOrderRoutes={updateOrderRoutes} />
    <Switch>
      <Route
        path="/:class/:order"
        exact
        component={CatalogPage}
      />
      <Route path="/aboutus" component={AboutUs} />
      <Route path="/faq" component={Faq} />
      <Route path="/register" component={Register} />
      <Route path="/" component={Home} />
    </Switch>
    <Footer />
  </BrowserRouter>
)

您可能需要调整 CatalogPage 中的一些逻辑以处理可能的未定义目录数据，无论它使用来自路由 props/etc... 来呈现目录内容。

在您的Header 组件中进行异步调用以获取可以导航到的路由，以便您可以动态呈现指向它们的渲染链接（如果这就是您将路由传递给Header 的原因） ）。