クリックボタン

Question

は私のボタンです：

<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)