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）。任何有关该问题的见解或指导将不胜感激。提前谢谢。

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

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

地点＆＃34; Home＆＃34;同一级别的路线

<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，它将成为组件的位置。

您也可以使用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>。它允许您为每条路线放置多个组件。

this.props.main and this.props.left

然后在App组件中，放置awk，它将成为组件的位置。

Answer 2

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

to期待一个网址。取决于您的Route设置。

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

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

2 个答案: