Warum funktioniert der React-Router Link nicht (ReactJS + Redux)?

Question

In meiner Stammkomponente Client.js, ich habe folgendes ein:

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

Und in meiner Rückkehr(), MainPage.js:

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

und außerhalb von return() von Mainpage Js:

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

schließlich in meinem HomePage.js,

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

und außerhalb von return() von HomePage.js:

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

MainPage.js zeigt und wenn ich auf der klicken, wird der Link (URL) ändert sich richtig zu 'Home', aber die HomePage.js ist wird nicht gerendert (kommt hoch und ersetzt die MainPage.js). Jede Einsicht oder Anleitung zu dem Thema wird sehr geschätzt. Vielen Dank im Voraus.

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

wenn Sie Mainpage von HomePage ersetzen wollen, gibt es Möglichkeiten,

Ort "Home" Route auf der gleichen Ebene

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

---

mit Verschachtelung

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> 

dann in App-Komponente, Platz this.props.children, wird es Platz für Komponenten sein.

---

auch Sie named components verwenden können, insted this.props.children. Es erlaubt Ihnen, mehr als eine Komponente pro Route zu platzieren.

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

dann in App-Komponente, legen this.props.main and this.props.left, wird es Platz für Komponenten sein.

Answer 2

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

to erwartet eine URL. abhängig von Ihrem Route Setup.

die docs heren lesen: https://github.com/reactjs/react-router/tree/master/docs