javascript - redux-simple-router - 基于 URL 执行操作

Question

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

这就是我想要做的。用户点击这样的 URL:http://localhost:3000/#/profile/kSzHKGX其中 kSzHKGX 是配置文件的 ID。这应该路由到配置文件容器，其中填充了 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 传递给内部组件。