Question

我是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

Answer 1

您不必将历史道具传递给该组件 router.By默认这个prop将由react路由器传递。

我在下面的示例中使用了redux作为我的商店。您不必将商店传递给每个组件来访问商店。只需将商店添加到您的商店作为组件根目录的支柱。

对于工作示例

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

REACT路由器无法在子组件内部工作

1 个答案: