Question

我正在使用Redux和redux-simple-router。

这就是我想要做的。用户点击URL如下： http://localhost:3000/#/profile/kSzHKGX 其中kSzHKGX是个人资料的ID。这应该路由到配置文件容器，其中填写了标识为kSzHKGX的配置文件的详细信息。

我的路线看起来像这样：

export default (
  <Route path="/" component={App}>
    ...
    <Route path="profile" component={Profile} />
    ...
  </Route>
)

所以点击上面的链接会给我Warning: [react-router] Location "undefined" did not match any routes

我的容器看起来像这样：

@connect(
  state => state.profile,
  dispatch => bindActionCreators(actionCreators, dispatch)
)
export class Profile extends Component {
  constructor(props) {
    super(props)
  }
  componentDidMount() {
    const { getProfileIfNeeded, dispatch } = this.props
    getProfileIfNeeded()
  }
  render() {
    return (
      <section>
      ...
      </section>
    )
  }
}

通常情况下，我的容器只会像往常一样在Redux中填充。

基本上我需要一种在路线中做一些通配符的方法。我需要将URL传递给从API中提取正确配置文件的操作。问题是，它是否可以与react-simple-router一起使用？我能以某种方式使用UPDATE_PATH吗？它会是正确的Redux方式吗？或者我应该使用其他东西吗？

Answer 1

按照Josh David Miller的建议，我的路线看起来像这样：

<Route path="admin/profile/:id" component={Profile} />

比我的容器有这个方法从API获取配置文件：

componentWillMount() {
  const { getProfile, dispatch } = this.props
  getProfile(this.props.params.id)
}

这要清理（没有它我会在组件加载时暂时显示以前的配置文件 - 在componentWillMount中点击API之前）

componentWillUnmount() {
  this.props.unmountProfile()
}

<强>更新

作为清理的替代方案，我考虑使用Container Component Pattern。基本上外部组件执行数据提取并将数据作为prop传递给内部组件。

redux-simple-router - 根据URL执行操作

1 个答案: