0
私はREACTを初めて使用しています。私はREACTルータが子コンポーネント内で動作しない
<Route exact path="/" component={Welcome} />
<Route path="/list" render={()=> (
<UserList store={store} />
)} />
<Route path="/create" render={({history})=> (
<CreateUser store={store} history={history} />
)} />
下記のショーとして3つのルートがありますが、私は子コンポーネントへのルートを移動すると、それは動作を停止し、私は私のlistcomponentに以下のコードを移動しREACTプロジェクトを作成しました。
<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>
);
}
}
さて、以下に示すように私は私のeditUserコンポーネントにでCreateUserルートを移動するとき。
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>
}
は、今ではあなたは、この小道具が反応ルータによって渡されるデフォルト router.Byのコンポーネントに履歴小道具を渡すために持っていけないCreateFormの
あなたは、ネストされたルートが置かれているコンポーネント全体を表示することができますか? – azium
@azium私はアプリケーションに何がうまくいかないかを示すコードを修正しました。 – Arun
@ Arun。 createuserのルートをmyeditコンポーネントに移動する理由はありますか?私の以下のanswer.youを参照してください。これらの小道具をcomponent.Byに渡す必要はありません。これは反応ルータによって追加されます... –