我目前正在尝试使用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>);
}
}