Question

我想点击一个按钮，然后导航到下一页belwo是我的按钮：

<RaisedButton label="Sign In"
           style={style}
           labelColor="#fff"
           onClick={this.navigateToHome}
           backgroundColor="#20B2AA" />

这就是我如何将onClick方法设置为路由到下一页但它无法正常工作：

 navigateToHome = () => {
    <Router>
      <Route  path={"/HomePage"} component={HomeActivity}/>
    </Router>
  };

我的全班：

import React from 'react';
import './App.css';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import {Card,CardHeader,CardText} from 'material-ui/Card';
import FlatButton from 'material-ui/FlatButton';
import TextField from 'material-ui/TextField';
import RaisedButton from 'material-ui/RaisedButton';
import {Router,Route} from 'react-router'
import {HomeActivity} from './HomeActivity'

const style = {
  margin: 12,
};
export class LoginCardView extends React.Component{


  navigateToHome = () => {
    <Router>
      <Route  path={"/HomePage"} component={HomeActivity}/>
    </Router>
  };

  render()
  {
  return(
    <center>
        <MuiThemeProvider>
    <Card  className="CardLogin" >

  <CardText>
    <div >
     <h4 className="TextLoginCenter"> Sign In</h4>

      <tr>
        <td> <TextField
      hintText="Enter Username"
    /></td>
      </tr>
      <tr>
        <td> <TextField
      hintText="Enter Password"
       type="password"
    /> </td>
      </tr>

      <tr>
        <td>  <RaisedButton label="Sign In"
           style={style}
           labelColor="#fff"
           onClick={this.navigateToHome}
           backgroundColor="#20B2AA" />  </td>
      </tr>

    </div>
      </CardText>

    </Card>
  </MuiThemeProvider>
</center>
         );
  }
}

Answer 1

您必须使用withRouter()和this.props.router.push()。

import {Router,Route,withRouter} from 'react-router';


class LoginCardView extends React.Component{
  constructor(props){
    //...
    this.navigateToHome = this.navigateToHome.bind(this);
    //...
    //...
  }
  ...
  navigateToHome(){
    this.props.router.push("/HomePage");
  };
  //...
  //...
  //...
export default withRouter(LoginCardView)

单击按钮以转到下一页

1 个答案: