为什么 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 出现，当我单击时，link (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

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

to 期待 url。取决于您的 Route 设置。

在此处阅读文档：https://github.com/reactjs/react-router/tree/master/docs

Answer 2

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

将"Home"路线放在同一层

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

为什么 react-router Link 不工作（ReactJS + Redux）？

Why isn't react-router Link working (ReactJS + Redux)?

javascript

reactjs

react-jsx

react-router

redux