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

Question

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

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

或者

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

只是想知道哪种写法更好，两者之间是否有任何区别？谢谢!

Answer 1

第二个解决方案是最好的，主要是因为它为组件提供了 matches 属性。

Here is a codesandbox exemple. (检查 index.js 文件是否包含路由)

但是每个解决方案都是有用的。

如果您想将 Prop 传递给BasicPage，第一种方法最好添加您想要的所有 Prop 。

但如果您有选择，请使用第二种解决方案，它对于您的应用程序的 future 来说更易于维护和清洁。

如果您需要提供自定义 Prop 和由 react-router 提供的 Prop ，您可以使用第三种解决方案:

<Route exact path="/" render={(props) => <App matches={props} myProps={1} />} />