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>
)

所以点击上面的 link 会给我 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。基本上让外部组件进行数据获取并将数据作为道具传递给内部组件。

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

redux-simple-router - perform action based on URL

javascript

reactjs

redux

react-router-redux