ReactJS中的动态路由到底是什么 [英] What exactly is Dynamic Routing in ReactJS

问题描述

我到处都是关于React动态路由的信息。但是我找不到任何可以解释其工作原理以及与静态路由在各个方面都有何不同的东西。

I have been all around internet about the dynamic routing of React. But I couldn't find anything which explains how it works and how it is different than static routing in every single sense.

当我们想使用React-Route在同一个页面中渲染某些东西时，我非常了解事情的发展。

I understood it pretty well how the things go when we want to render something in the same page using React-Route.

我的问题是，当要呈现一个全新的页面时，它如何工作？因为在这种情况下，必须重新呈现该页面内的所有DOM。这样会是静态路由吗？还是在某些方面还是动态的？

My question is how does it work when a whole new page is wanted to be rendered? Because in this case all the DOM inside that page has to be re-rendered. Thus would it be static routing? or still dynamic in some ways?

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

I hope I've been clear. Thanks for the answers in advance, I appreciate!

推荐答案

我认为以上解释不正确静态与动态路由。网络上也没有太多解释，但反应路由器文档。来自文档

I don't think the above explanation is correct for Static vs Dynamic routing.Also there is not much explanation in the web for it, but there is a very nice explanation in React Router Docs.From the Docs

如果您使用过Rails，Express，Ember，Angular等，则使用了静态
路由。在这些框架中，您需要在
应用初始化之前声明路由，然后再进行渲染。 v4之前的React Router
也是静态的（大多数情况下）。让我们看一下如何在express中配置
路由：

If you’ve used Rails, Express, Ember, Angular etc. you’ve used static routing. In these frameworks, you declare your routes as part of your app’s initialization before any rendering takes place. React Router pre-v4 was also static (mostly). Let’s take a look at how to configure routes in express:

在静态路由中，声明路由并将其导入

In Static routing, the routes are declared and it imported in the Top level before rendering.

动态路由中的

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

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.

因此在动态路由中，路由会在应用呈现时进行。
上面答案中解释的示例都是静态路由。

So in Dynamic routing, the routing takes place as the App is rendering. The examples explained in the above answer are both for static routing.

对于动态路由，它更像是

For Dynamic routing it is more like

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 组件

First in App component only one route is declared /tacos.When the user navigates to /tacos the Tacos component is mounted and there the next route is defined /carnitas.So when the user navigates to /tacos/carnitas, the Carnitas component is mounted and so on.

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

So here the routes are initialized dynamically.

这篇关于ReactJS中的动态路由到底是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！