React Router在转到不同的链接后不会重新呈现组件

时间:2016-06-19 14:23:40

标签: reactjs react-router

我目前正在尝试使用react路由器将我的网站重定向到另一个页面。

但是,每当我访问express中定义的端点,而不是重新呈现页面时,我得到的就是我从express中的res.send()获得的测试字符串。

但是,我希望能够将组件重新渲染为另一个页面,而不是仅仅从服务器接收一些文本。

render(
    <Router history = {hashHistory}>
        <Route path = "/" component = {Main}/>
        <Route path = "/posts" component = {PostDetail} />
    </Router>
,document.getElementById('app'))

我将此用作根据路径加载不同组件的方法。

这是我的主要成分。

class Main extends Component {
  constructor(props, context) {
    super(props, context);

    this.handleRequestClose = this.handleRequestClose.bind(this);
    this.handleTouchTap = this.handleTouchTap.bind(this);

    this.state = {
      open: false,
    };
  }

  handleRequestClose() {
    this.setState({
      open: false,
    });
  }

  handleTouchTap() {
    this.setState({
      open: true,
    });
  }

  render() {
    const standardActions = (
      <FlatButton
        label="Ok"
        primary={true}
        onTouchTap={this.handleRequestClose}
      />
    );

    return (
      <MuiThemeProvider muiTheme={muiTheme}>
        <div style={styles.container}>
            <Grid>
                <Row>
                    <Col xs={12}>
                        <Row start = "xs">
                            <Col xs = {8}>
                                <LoginDialogComponent />

                            </Col>
                            <Col xs = {2}>
                                <SignUpDialogComponent />
                            </Col>
                            <Col xs = {2} >
                                <LoginDialogComponent label = "Brand" />
                            </Col>

                        </Row>

                    </Col>
                </Row>
                <br></br>
                <Row>   
                  <Col xs={12}>
                    <Row center="xs">
                      <Col xs={12} >
                        <PostList hands = {this.props.hands}/>

                      </Col>
                    </Row>
                  </Col>
                </Row>
            </Grid>

        </div>

      </MuiThemeProvider>
    );
  }
}

export default Main;

这是PostDetail组件

导入来自&#39;反应&#39 ;;

的反应
export default class PostDetail extends React.Component{
    render(){
        return (<div> Hello World </div>);
    }
}

0 个答案:

没有答案