单击按钮转到下一页[重复]

Question

This question already has an answer here:

• Programmatically Navigate using react-router 8 answers

I want to click a button and i navigate to the next page belwo is my button:

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

and this is how i set the onClick Method to route to the next page but it's not working :

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

My full class:

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

You must use withRouter() and 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)