ReactJS中的动态路由究竟是什么

Question

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

当我们想要使用React-Route在同一页面中呈现某些东西时，我非常理解这些事情。

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

我希望我已经清楚了。 感谢您的回答，我很感激！

Answer 1

我不认为以上解释对于静态与动态路由是正确的。此外，网上没有太多解释，但有React Router Docs.来自文档的一个非常好的解释

  

如果您使用过Rails，Express，Ember，Angular等，那么您已经使用了静态   路由。在这些框架中，您将路由声明为您的路由的一部分   app进行任何渲染之前的初始化。反应路由器   pre-v4也是静态的（大部分）。我们来看看如何配置   快递路线：

在静态路由中，路由已声明，并在呈现前的顶级中导入。

而在动态路由中

  

当我们说动态路由时，我们的意思是将路由作为您的路由   app正在呈现，而不是在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 组件已安装，依此类推。

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

Answer 2

使用react-router和react-router-dom，并编写如下内容：

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

因此，您可以在任何地方运行此行并有条件地转到其他位置