なぜ反応ルータのリンクが動作しないのですか（ReactJS + Redux）？私のルートコンポーネントのclient.jsで

Question

は、私は次のように設定している：

render(
    <div> 
    <Provider store={store}> 
     <Router history={hashHistory}> 
     <Route 
      component={MainPage} 
      path="/" 
     > 
      <Route 
       component={HomePage} 
       path="Home" 
      /> 
     </Route> 
     </Router> 
    </Provider> 
    </div>, 
    document.getElementById('app') 
) 

そして、（私の見返りに）、MainPage.js：リターンの

 <RaisedButton 
      containerElement={<Link to={`Home`}/>} 
      label="Button1" 
      labelColor='#88898C' 
      labelStyle={{textTransform:'intial'}} 
      style={styles.signIn} 
     /> 

と外側（）メインページの.js：

 export default connect(
      mapStateToProps, mapDispatchToProps 
     )(MainPage.js) 

最後に、私のHomePage.js、中

return(
    <div>Hello World</div> 
) 

HomePage.jsの

とリターンの外（）：

 export default connect(
      mapStateToProps, mapDispatchToProps 
     )(HomePage.js) 

MainPage.js現れ、私が上でクリックすると、リンク（URL）が正しく「ホーム」に変更しますが、HomePage.jsがありますレンダリングされません（MainPage.jsを置き換える）。問題が何であるかについての洞察や指導は、非常に高く評価されます。前もって感謝します。

NEW EDIT **：

render(
    <div> 
    <Provider store={store}> 
     <Router history={hashHistory}> 
     <Route 
      component ={Login} 
      path='/' 
     /> 
     <Route 
      component={App} 
      path="Home" 
     > 
      <IndexRoute 
      component={MainCard} 
      /> 
      <Route 
      component={FirstPage} 
      path="/Discussion" 
      /> 
      <Route 
      component={SecondPage} 
      path="/Team 1" 
      /> 
      <Route 
      component={ThirdPage} 
      path="/Team 2" 
      /> 
      <Route 
      component={ThreadPage} 
      path="/discussion/:id" 
      /> 
      <Route 
      component={StaticPage} 
      path="/Static" 
      /> 
     </Route> 
     </Router> 
    </Provider> 
    </div>, 
    document.getElementById('app') 
) 

Answer 1

あなたがホームページでメインページを交換したい場合は、同じレベルで

場所 "ホーム" ルート

<Router history={hashHistory}> 
     <Route component={MainPage} path="/" /> 
     <Route component={HomePage} path="Home" /> 
</Router> 

---

方法があります

ネストあり

import {IndexRoute, ...} from 'react-router'; 

<Router history={hashHistory}> 
    <Route component={App} path="/" > 
     <IndexRoute component={MainPage} /> 
     <Route component={HomePage} path="Home" /> 
     <Route component={AnotherPage} path="Page" /> 
    </Route> 
</Router> 

次に、Appコンポーネントでは、場所はthis.props.childrenで、コンポーネントの場所になります。

---

また、あなたがnamed componentsを使用することができ、this.props.childrenのinsted。ルートごとに1つ以上のコンポーネントを配置することができます。

<Router history={hashHistory}> 
    <Route component={App} path="/" > 
     <IndexRoute components={{main:MainPage, left:LeftContent}} /> 
     <Route path="Home" components={{main:HomePage, left:LeftContent}} /> 
     <Route path="Page"components={{main:AnotherPage}} /> 
    </Route> 
</Router> 

次に、Appコンポーネントでは、場所はthis.props.main and this.props.leftで、コンポーネントの場所になります。

Answer 2

<Link to=`${homeUrl}`>Home</Link> 

to URLを期待しています。あなたのRoute設定に応じて

ドキュメントのhererを読む：https://github.com/reactjs/react-router/tree/master/docs