reactjs - React 中动态路由与静态路由的优点

Question

我正在阅读有关 static vs dynamic routing 的内容在 React Router 中，我正在努力确定后者的优势(以及为什么 v4 选择使用它)。我可以看到列出应用程序(静态)的所有路由以及每个路由映射到的组件的优点，允许您跟踪给定特定 URL 将呈现的内容。但我没有看到动态路线有任何明显的优势。

如果有的话，我只能看到缺点，因为没有明确的方法来查看 URL 将映射到什么状态，而无需从根应用程序元素开始并通过路由进行工作(尽管我可能是错误的)。

动态路由适用于什么情况？为什么它比静态路由更好(也许特别是在 React 应用程序中)？

Answer 1

动态路由

来自 react 路由器 docs :

When we say dynamic routing, we mean routing that takes place as your app is rendering, not in a configuration or convention outside of a running app.

将路由视为组件

早期版本的 react-router (v4 之前)曾经使用静态路由。这导致到应用程序中的集中路由，例如:

<Router>
    <Route path='/' component={Main}>
      <IndexRoute component={Home} />
      <Route path='about' component={About} />
      <Route onEnter={verifyUser} path='profile' component={Profile} />
      ...
    </Route>
</Router>

但是，这并不完全是 React 的做事方式。 React 专注于使用基于组件的逻辑进行组合。因此，我们可以将路由想象成组件，而不是将其想象为静态系统，这就是 React-router v4 所引入的内容及其背后的主要理念。

因此，我们可以像使用任何 React 组件一样使用 Route。这让我们可以在构建不同的组件时添加 Route 组件。这样做的一个优点是我们可以将路由逻辑与需要它们的组件解耦。

嵌套路线

About 组件可以处理所有路由，并根据 url 有条件地渲染 UI 部分(例如 /about/job 或 /about/life 等)。

另一件需要注意的事情是，Route 组件将渲染匹配路由的组件或 null。例如，以下 Route 呈现路由 /about 的 About 组件，否则呈现 null (或无)。

<Route path='about' component={About} />

这也类似于我们在 React 中条件渲染组件的方式:

route === '/about' ? <About /> : null

现在，如果我们需要在路由 /about/job 或 /about/life 的 About 组件内渲染一些其他组件，我们可以这样做:

const About = ({ match ) => (
    <div>
        ...
        <Route path={`${match.url}/job`} component={Job} />
        <Route path={`${match.url}/life`} component={Life} />
    </div>
)

动态导入和代码分割

就我个人而言，我还发现，如果我使用带有代码分割的动态导入，这种方法对我来说效果更好，因为我可以在任何组件中添加动态路由。例如，

import Loadable from 'react-loadable';

const Loading = () => (
    <div />
);

const Job = Loadable({
    loader: () => import('./Job'),
    loading: Loading,
});

const Life = Loadable({
    loader: () => import('./Life'),
    loading: Loading,
});

...

render() {
    return (
        ...
        <Route path={`${match.url}/job`} component={Job} />
        <Route path={`${match.url}/life`} component={Life} />
    )
}

响应路线

动态路由的另一个很好的用例是创建响应式路由，react router docs 对此进行了很好的解释。以及推荐阅读。这是文档中的示例:

const App = () => (
  <AppLayout>
    <Route path="/invoices" component={Invoices}/>
  </AppLayout>
)

const Invoices = () => (
  <Layout>

    {/* always show the nav */}
    <InvoicesNav/>

    <Media query={PRETTY_SMALL}>
      {screenIsSmall => screenIsSmall
        // small screen has no redirect
        ? <Switch>
            <Route exact path="/invoices/dashboard" component={Dashboard}/>
            <Route path="/invoices/:id" component={Invoice}/>
          </Switch>
        // large screen does!
        : <Switch>
            <Route exact path="/invoices/dashboard" component={Dashboard}/>
            <Route path="/invoices/:id" component={Invoice}/>
            <Redirect from="/invoices" to="/invoices/dashboard"/>
          </Switch>
      }
    </Media>
  </Layout>
)

总结 docs ，您会注意到使用动态路由将 Redirect 添加到大屏幕尺寸变得多么简单和声明性。在这种情况下使用静态路由会非常麻烦，并且需要我们将所有路由放在一个地方。动态路由简化了这个问题，因为现在逻辑变得可组合(如组件)。

静态路由

有些问题无法通过动态路由轻松解决。优势static routing是它允许在渲染之前检查和匹配路线。因此，它被证明非常有用，尤其是在服务器端。 React Router 团队也在开发一个名为 react-router-config 的解决方案。 ，引用其中:

With the introduction of React Router v4, there is no longer a centralized route configuration. There are some use-cases where it is valuable to know about all the app's potential routes such as:

1. Loading data on the server or in the lifecycle before rendering the next screen
2. Linking to routes by name
3. Static analysis

希望这对动态路由和静态路由及其用例提供了很好的总结:)