javascript - 为什么 React-router Link 不起作用(ReactJS + Redux)？

Question

在我的根组件 client.js 中，我进行了以下设置:

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

在我的 return() 中，MainPage.js:

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

以及 MainPage.js 的 return() 之外:

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

最后，在我的 HomePage.js 中，

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

以及 HomePage.js 的 return() 之外:

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

MainPage.js 出现，当我单击 时，链接 (URL) 正确更改为“Home”，但 HomePage.js 未呈现(即将出现，替换 MainPage.js)。任何有关问题所在的见解或指导将不胜感激。预先感谢您。

新编辑**:

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

如果你想用HomePage替换MainPage，有办法

将“家”路线放置在同一层

<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。它允许您在每条路线上放置多个组件。

<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和this.props.left，它将用于放置组件。