Question

每次单击“发送问题”按钮时，我都会尝试导航到另一个组件。

这是我的尝试：

matlab code:
xmin=0;
xmax=1;
N=100;
dt=0.009;
t=0;
%tmax=0.5;
v=1;

%--------------% discrétiser le domaine --------------------------

dx=(xmax-xmin)/N;
x=xmin-dx : dx : xmax+dx;

%--------------% initialiser les conditions-----------------------

u0=exp(-200*(x-0.25).^2);
u=u0;
unpl=u0;

%--------------% Écouler le temps---------------------------------

%nsteps=tmax/dt;

while t < 1.0
%--------------% calculate boundary conditions-------------

u(1)=u(3);
u(N+3)=u(N+1);

%--------------% la solution numérique Upwind ------------------

for i=2 : N+2
unpl(i)=u(i)-v*(dt/dx)*(u(i)-u(i-1));
end

%---------------% mise à jour de t------------------------------

   t=t+dt;
   u=unpl;

  %----------------% plot solution----------------------------------

 plot(x,u,'bo-','markerfacecolor','b')
   hold on
   hold off
 xlabel('x','fontsize',16)
 ylabel('u(t,x)','fontsize',16)
 title(sprintf('time=%1.3f',t),'fontsize',16)
 shg
 pause(dt);
 end

但是我收到以下错误

<p>
  {(this.state.hide) && (
    <button 
      style={{ background: "green", color: "white" }}
      onClick={()=> {this.props.history.replace('/questions')}}
    >
      Send Question
    </button>
  )}
</p>

以下是与路由相关的导入

Search.js:115 Uncaught TypeError: Cannot read property 'replace' of undefined

Answer 1

很可能你没有包装你的组件 withRouter

class YourComponent extends React.Component {
  render() {
    return (
       ... 
       <button onClick={() => this.props.history.replace('/questions')}>
       ...
    );
  }
}

export default withRouter(YourComponent);

另一个简单的解决方案，您不需要使用 withRouter

import * as React from 'react';
import { Link } from 'react-router-dom';

export default YourComponent extends React.Component {

  render() {
    return (
      ...
      <p>
        { this.state.hide && (
          <Link to="/questions">
            <button 
              style={{ background: "green", color: "white" }} 
            >
              Send Question
            </button>
          </Link>
        )}
      </p>
      ...
    );
  }
}

另请注意：如果您要替换当前网址，则应使用 this.props.history.replace ，但是如果您要将用户导航到新网页（这是你最想做的事。你应该使用 this.props.history.push ）

使用ReactJs中的按钮在组件之间导航和路由

1 个答案: