在 React 中使用 react-router-dom 在 App.js 中配置路由的更好方法是什么

问题描述

限时删除！！

在 React 的 App.js 中，我们可以:

<路由器><开关><路线路径=/基础"><BasicsPage></BasicsPage></路线>//其他路线</开关></路由器>

或

<路由器><开关><路线路径=/基础"组件={BasicsPage}></路线>//其他路线</开关></路由器>

只是想知道哪种编写方式更好，两者之间是否有任何区别?谢谢！

解决方案

Route渲染方法:

推荐使用 呈现内容的方法是使用 children 元素，如下所示.但是，还有一些其他方法(请参阅this)您可以用来渲染带有 的东西.这些主要是为了支持在引入钩子之前用早期版本的路由器构建的应用程序.

示例:

<开关><路由路径=/basics"><BasicsPage/></路线><路由路径=/foo"><Foo>这里有些孩子</Foo></路线></开关></路由器>

使用上述方法声明所有路由并使用hooks(useHistory、useLocation、useParams 等)来访问路由器的内部状态.这种风格还可以轻松切换到 React Router v6.请参阅 this 正如@jonrsharpe 在 评论.

In App.js of React, we can either:

<div className="App">
  <Router>
    <Switch>
      <Route
        path="/basics"
        >
        <BasicsPage></BasicsPage>
      </Route>
      // other routes
    </Switch>
  </Router>
</div>

OR

<div className="App">
  <Router>
    <Switch>
      <Route
        path="/basics"
        component={BasicsPage}
        >
      </Route>
      // other routes
    </Switch>
  </Router>
</div>

Just wondering which is the better way to write it and if there' any difference between the two? Thanks!

解决方案

Route render methods:

Example:

<Router>
  <Switch>
    <Route path="/basics">
      <BasicsPage />
    </Route>
    <Route path="/foo">
      <Foo>Some children here</Foo>
    </Route>
  </Switch>
</Router>

Use the above method for declaring all the routes and use hooks (useHistory, useLocation, useParams etc.) to access the router's internal state. This style will also make it easy to switch to React Router v6. See this as pointed out by @jonrsharpe in the comment.

这篇关于在 React 中使用 react-router-dom 在 App.js 中配置路由的更好方法是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..