reactjs - 和有什么区别和{我的组件}?

Question

我已经看到了两种在 React 中定义路由的方法： <Route path="/" component={MyComponent} /> 谁能 <Route path="/">{MyComponent}<Route /> 解释一下两者之间的区别？

标签： reactjsreact-router

Answer 1

您不应该真正使用：

<Route path="/">{MyComponent}<Route />

变体。只有当组件是 Function 组件时它才会起作用（如果你尝试放置一个类组件，你会得到一个错误），并且只有当组件内部没有钩子时才有效。路由类型定义指出，在 props.children 中，它接收一个渲染函数，该函数根据路由道具（历史记录、匹配参数……）返回一个 React.ReactNode，或者直接返回一个 React.ReactNode。所以你真的应该像这样使用它：

<Route path="/"><MyComponent /><Route />

或者，如果您的组件需要路由道具（这与 相同）：

<Route path="/">{(props) => <MyComponent {...props} />}<Route />

希望这可以帮助。