ReactJS中究竟是什么动态路由

Question

我一直在互联网上关于React的动态路由.但我找不到任何解释它如何工作的东西,以及它与每种意义上的静态路由有何不同.

当我们想要使用React-Route在同一页面中呈现某些内容时,我非常理解这些事情.

我的问题是,当想要呈现整个新页面时,它是如何工作的？因为在这种情况下,必须重新呈现该页面内的所有DOM.那么这是静态路由吗？或者在某些方面仍然充满活力？

我希望我已经清楚了.感谢您提前的答案,我感谢!

Answer 1

我不认为上面的解释对于静态与动态路由是正确的.在网上没有太多的解释,但在React Router Docs中有一个非常好的解释.来自Docs

如果您使用过Rails,Express,Ember,Angular等,那么您已经使用了静态路由.在这些框架中,在进行任何渲染之前,您将路由声明为应用程序初始化的一部分.React Router pre-v4也是静态的(大多数情况下).我们来看看如何在express中配置路由:

在静态路由中,声明路由并在渲染之前将其导入顶层.

而在动态路由中

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

因此,在动态路由中,路由将在应用程序呈现时进行.上述答案中解释的示例都是静态路由.

对于动态路由,它更像是

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

首先,在应用程序部件只有一个路径被声明/tacos.当用户导航到/tacos的玉米饼部件安装并且存在的下一个路由被定义/carnitas当用户导航到.所以/tacos/carnitas,在猪肉丝部件安装等.

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