如何根据redux状态将不同的react组件绑定到相同的react-router路由？

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

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

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

编辑：这是您将标志从您的状态映射到道具的方式。

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)

编辑 2：使用 Provider 将 React Router 连接到 Redux

const Root = ({ store }) => (
  <Provider store={store}>
    <Router>
      <Route path="/" component={App} />
    </Router>
  </Provider>
)