Question

使用React，Redux和React-router，我想根据redux状态将不同的组件绑定到同一路由。例如：

假设ComponentA和ComponentB是React组件

假设我有这个redux状态

{
  flag: true;
}

我想要这个React Router配置/routes.js

<Route path="/" component={App}>
  <Route path="/test" component={ComponentA} />
</Route>

但是如果我的Redux状态中的flag为false我想要

...
  <Route path="/test" component={ComponentB} />
...

我知道我可以为ComponentA和ComponentB创建一个包装器组件来检查redux状态，然后渲染相应的组件，但我正在寻找一个不需要创建的答案新组件

Answer 1

您可以在路径的组件字段中使用三元运算符。

[ 1.  2.  2.  3.]
[ 4.  5.]
[ 7.   7.5  9.   8.   9. ]

编辑：这是你将国旗从你的州映射到道具的方式。

<Route path="/test" component={flag ? ComponentA : ComponentB} />

编辑2：使用import { connect } from 'react-redux'; // ... Component Definition const mapStateToProps = (state, ownProps) => { return { flag: state.flag } } const mapDispatchToProps = (dispatch, ownProps) => { return { // Whatever you want to dispatch } } const ConnectedComponent = connect( mapStateToProps, mapDispatchToProps )(YourComponent)

将React Router连接到Redux

Provider

如何根据redux状态使用相同的反应路由器路由绑定不同的反应组件？

1 个答案: