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

问题描述

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

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

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

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

解决方案

我不认为上面的解释对于Static vs Dynamic路由是正确的.另外还有网络上没有太多解释，但在 React Router Docs 中有一个很好的解释.来自文档

<块引用>

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

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

而在动态路由中

<块引用>

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

因此，在动态路由中，路由发生在应用程序呈现时.上述答案中解释的示例均用于静态路由.

对于动态路由，它更像是

const App = () =>(<浏览器路由器>{/* 这是一个 div */}
{/* 这是一条路线 */}<Route path="/tacos" 组件={Tacos}/></div></浏览器路由器>)//当 url 匹配 `/tacos` 时，这个组件渲染const Tacos = ({ match }) =>(//这是一个嵌套的 div
{/* 这是一个嵌套路由，match.url 帮助我们创建一个相对路径 */}<路线路径={match.url + '/carnitas'}组件={肉饼}/></div>)

App 组件中只有一个路由声明为 /tacos.当用户导航到 /tacos 时，Tacosstrong> 组件已安装，并且下一个路由定义为 /carnitas.因此，当用户导航到 /tacos/carnitas 时，Carnitas 组件已安装等等.

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

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.

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

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

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.

Whereas in Dynamic routing

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>
)

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屋！