REACT 路由器在子组件中不起作用答案

【问题标题】：REACT router not working inside child componentsREACT 路由器在子组件中不起作用
【发布时间】：2017-11-17 20:59:18
【问题描述】：

我是 REACT 的新手。我创建了一个 REACT 项目，它具有如下所示的三个路线

<Route exact path="/" component={Welcome} />
<Route path="/list" render={()=> (
  <UserList store={store} />
)} />
<Route path="/create" render={({history})=> (
  <CreateUser store={store} history={history} />
)} />

但是当我将 Route 移动到子组件时，它停止工作，我将下面的代码移动到我的 listcomponent。

<Route path="/create" render={({history})=> (
  <CreateUser store={store} history={history} />
)} />

在此之后链接重定向到 /create 但组件没有被加载。

非常感谢您的帮助。

整个应用组件

class App extends Component {
  render() {
    return (
      <div className="App">
        <br />
        <div>
          <Link to="/">Home</Link> | 
          <Link to="/list">User List</Link> | 
          <Link to="/create">Add User</Link> | 
        </div>
        <br />
        <Route exact path="/" component={Welcome} />
        <Route path="/list" render={()=> (
          <UserList store={store} />
        )} />
        <Route path="/create" render={({history})=> (
          <CreateUser store={store} history={history} />
        )} />
        <Route path="/edit/:id" render={({history, match}) => (
          <EditUser store={store} history={history} match={match} />
        )}/>
      </div>
    );
  }
}

现在，当我将 CreateUser 路由移动到我的 editUser 组件时，如下所示。

render() {
    return <div>
        <form onSubmit={this.updateUser}>
            <input type="text"name="username" ref={(input)=>this.usernameTxt = input} placeholder="Username" /><br />
            <input type="text"name="location" ref={(input)=>this.locationTxt = input} placeholder="Location" /><br />
            <button>Update user</button>
        </form>
        <Route path="/create" render={({history})=> (
            <CreateUser store={store} history={history} />
        )} />
    </div>
}

现在它将停止显示 createform

【问题讨论】：

能把嵌套路由放置的整个组件展示出来吗？
@azium 我修改了代码以显示我的应用程序出了什么问题。
@Arun。是否有任何理由将 createuser 的路由移动到 myedit 组件。请看我下面的答案。您不需要将这些道具传递给组件。默认情况下，这将由 react 路由器添加...

标签： reactjs react-router react-redux react-router-v4

【解决方案1】：

您不必将历史道具传递给路由器。默认情况下，这个道具将由反应路由器传递。

在以下示例中，我使用 redux 作为我的 store。您不必将 store 传递给每个组件即可访问 store。只需将带有 store 的提供程序作为 prop 添加到组件的根目录即可。

工作示例

https://codesandbox.io/s/9jvz19949r

【讨论】：