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

Posted 2023-02-21

【中文标题】单击按钮路由到下一页[重复]

【英文标题】：click button to route to next page [duplicate]

【发布时间】：2018-04-22 02:50:41

【问题描述】：

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

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

【问题讨论】：

你使用的是哪个版本的 react-router？

【参考方案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)

【讨论】：

当我按下按钮时收到此错误TypeError: Cannot read property 'push' of undefined LoginCardView._this.navigateToHome

是的，我做到了，而且课程也有出口

当我删除顶部的导出并且我只放底部 ./src/App.js 67:30-43 './LoginCardView' does not contain an export named 'LoginCardView'.

版本是"react-router": "^4.2.0"

你在这个组件中使用了另一个 HOC 吗？像connect 或...之类的东西？如果是，试试这个：***.com/a/37024305/2357848