3

我将 Redux 与 redux-simple-router 一起使用。

这就是我想要做的。用户点击如下 URL： 配置文件的 ID 在http://localhost:3000/#/profile/kSzHKGX 哪里。kSzHKGX这应该路由到 Profile 容器，其中填写了带有 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 方式吗？还是我应该使用其他东西？

4

1 回答 1

2

按照 Josh David Miller 的建议，我的路线如下所示：

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

比我的容器获得了从 API 获取配置文件的方法：

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

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

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

更新：

作为清理的替代方法，我正在考虑使用Container Component Pattern。基本上让外部组件进行数据获取并将数据作为道具传递给内部组件。

于 2016-01-08T15:57:32.127 回答