React Router 中动态和静态路由的顺序

Question

我正在使用 React 构建博客前端，并且我有几个静态路由（主页和视频），站点的其余部分由从 api 提取页面内容的动态路由覆盖。我试图找出覆盖静态路由的最佳方法，这些静态路由总是被动态路由捕获。主页工作正常，但视频路由总是被动态路由捕获。

我有这个作为我的路由器

<Router onUpdate={() => window.scrollTo(0,0)} history={history}>
      <Switch>
        <Layout>
            <Route exact path="/" render={() => <Home />} />
            <Route exact path="/videos" render={() => <Videos />} />
            <Route path="/:url" render={() => <Post />} />
        </Layout>

      </Switch>
    </Router>

我在想，静态路由首先（并且是精确的）会在它到达动态路由之前捕获并显示正确的组件......事实并非如此。

如果它们匹配而不是动态路由，如何能够首先捕获静态路由？

谢谢，让我知道！

Answer 1

在这种情况下，我需要将 Layout 组件移到 Switch 之外，以使路由根据需要工作。