ReactJS 中的动态路由到底是啥

Posted 2023-02-22

【中文标题】ReactJS 中的动态路由到底是啥

【英文标题】：What exactly is Dynamic Routing in ReactJSReactJS 中的动态路由到底是什么

【发布时间】：2018-02-16 04:50:50

【问题描述】：

我一直在互联网上了解 React 的动态路由。但是我找不到任何东西来解释它的工作原理以及它与静态路由在各个方面的不同之处。

当我们想使用 React-Route 在同一页面中呈现某些内容时，我非常了解事情的进展。

我的问题是，当想要呈现一个全新的页面时它是如何工作的？因为在这种情况下，该页面内的所有 DOM 都必须重新渲染。那么它会是静态路由吗？还是在某些方面仍然充满活力？

我希望我已经清楚了。 提前感谢您的回答，不胜感激！

【问题讨论】：

欢迎来到 *** - 这个网站是一个问答网站，而不是一个真正的论坛 - 我建议尝试一下，如果您有问题，请回来提出具体问题。

感谢您的欢迎。如果我做错了什么，我深表歉意，我的目的不是真正讨论，而只是为了了解这两个术语之间的真正区别。

由于您标记的答案明显不正确，请考虑更改答案标记，以免误导其他用户。

【参考方案1】：

我认为上述解释对于 Static 与 Dynamic 路由是不正确的。此外，网络上也没有太多解释，但有一个非常React Router Docs.From the Docs 中很好的解释

如果您使用过 Rails、Express、Ember、Angular 等。您使用过静态 路由。在这些框架中，您将您的路线声明为您的 在任何渲染发生之前应用程序的初始化。反应路由器 v4 之前的版本也是静态的（大部分情况下）。我们来看看如何配置 快递路线：

在静态路由中，路由被声明并在渲染前顶层导入。

而在动态路由中

当我们说动态路由时，我们指的是发生在您的 应用程序正在呈现，而不是在 a 之外的配置或约定中 正在运行的应用程序。

因此，在动态路由中，路由发生在应用正在渲染时。 上述答案中解释的示例均用于静态路由。

对于动态路由，它更像是

const App = () => (
    <BrowserRouter>
        /* here's a div */
        <div>
        /* here's a Route */
        <Route path="/tacos" component=Tacos/>
        </div>
    </BrowserRouter>
)

// when the url matches `/tacos` this component renders
const Tacos  = ( match ) => (
    // here's a nested div
    <div>
        /* here's a nested Route,
            match.url helps us make a relative path */
        <Route
        path=match.url + '/carnitas'
        component=Carnitas
        />
    </div>
)

App 组件中的第一个只有一个路由被声明为/tacos。当用户导航到/tacos 时，Tacos 组件被挂载并在那里定义了下一个路由/carnitas.所以当用户导航到/tacos/carnitas时，Carnitas组件被挂载等等。

所以这里的路由是动态初始化的。

【讨论】：

但我们称之为“动态路由”，与你可能更熟悉的“静态路由”有很大不同。

没有收到您的声明？

【参考方案2】：

使用react-router和react-router-dom，写成这样：

onSubmit((e) => 
e.preventDefault();
this.props.history.push('<url>')

所以你可以在任何地方运行这条线路并有条件地去另一个地方

【讨论】：

那么被减分的原因是什么？