2017-11-17 6 views
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の

+1

あなたは、ネストされたルートが置かれているコンポーネント全体を表示することができますか? – azium

+0

@azium私はアプリケーションに何がうまくいかないかを示すコードを修正しました。 – Arun

+0

@ Arun。 createuserのルートをmyeditコンポーネントに移動する理由はありますか?私の以下のanswer.youを参照してください。これらの小道具をcomponent.Byに渡す必要はありません。これは反応ルータによって追加されます... –

答えて

0

の表示を停止します。

この次example.Youで私の店はstore.Justは、コンポーネントのルートに小道具としてお店を持つプロバイダを追加アクセスするために、すべてのコンポーネントに店を渡すために持っていけないように私はReduxのを使用。ワーキング例えば

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

関連する問題