Reactjs 为什么你不为我工作？

我有一个启动屏幕，有两个按钮，分别是登录和注册。以下是相同的代码：

import React from 'react';
import Header from './Header.jsx';
import Authentication from './AuthenticateCard.jsx';
import { Redirect } from 'react-router-dom';
function StarterScreen() {
  function loginClick()
    {
      return(<Redirect to= "/login" />);
      alert("Tru");
    }
    function registerClick()
    {
      console.log("Register");
    }
  return (
    <div>
      <Header header="My Water Chain"/>
      <div className="WhiteCard">
      <div className="whiteSpace">
      </div>
      <Authentication text="Login" onClickaction={loginClick} />
      <Authentication text="Register" onClickaction={registerClick}/>
      </div>
    </div>
  );
}

export default StarterScreen;

从“React”导入React；
从“./Header.jsx”导入标头；
从“/AuthenticateCard.jsx”导入身份验证；
从'react router dom'导入{Redirect}；
函数启动程序屏幕（）{
函数loginClick（）
{
return（）；
警报（“Tru”）；
}
函数寄存器click（）
{
控制台日志（“寄存器”）；
}
返回(
试试：

import React from 'react';
import Header from './Header.jsx';
import Authentication from './AuthenticateCard.jsx';
import { withRouter } from 'react-router-dom';

function StarterScreen(props) {
  function loginClick()
    {
      props.history.push('/login');
    }
    function registerClick()
    {
      console.log("Register");
    }
  return (
    <div>
      <Header header="My Water Chain"/>
      <div className="WhiteCard">
      <div className="whiteSpace">
      </div>
      <Authentication text="Login" onClickaction={loginClick} />
      <Authentication text="Register" onClickaction={registerClick}/>
      </div>
    </div>
  );
}

export default withRouter(StarterScreen);

从“React”导入React；
从“./Header.jsx”导入标头；
从“/AuthenticateCard.jsx”导入身份验证；
从“react router dom”导入{withRouter}；
功能启动屏幕（道具）{
函数loginClick（）
{
props.history.push（'/login'）；
}
函数寄存器click（）
{
控制台日志（“寄存器”）；
}
返回(
);
}
使用路由器导出默认值（启动屏幕）；

注意这里，我添加了
withRouter
来包装您的组件，并将其从react router dom导入。然后我使用
props.history.push
来导航您不应该在
StarterScreen
的事件处理程序中返回
重定向，您可以利用
withRoutes
高阶组件或u使用
useHistory
hook可访问导航器的历史记录，并通过调用
push
更改您要导航到的路线

import { withRouter } from 'react-router-dom';

const StarterScreen = ({history}) => {
    const loginClick = () => {
        history.push("/login");
    }
    return <div>
        <Header header="My Water Chain"/>
        <div className="WhiteCard">
            <div className="whiteSpace">
            </div>
            <Authentication text="Login" onClickaction={loginClick} />
            <Authentication text="Register" onClickaction={registerClick}/>
        </div>
    </div>;
}

export default withRouter(StarterScreen);

从“react router dom”导入{withRouter}；
常量起始屏幕=（{history}）=>{
const loginClick=（）=>{
history.push（“/login”）；
}
返回
loginClick
似乎只是返回了一些JSX。我想你想要的是
useHistory
中的
react router dom
钩子，它实际上是一个函数。但让我试试你说的
import { withRouter } from 'react-router-dom';

const StarterScreen = ({history}) => {
    const loginClick = () => {
        history.push("/login");
    }
    return <div>
        <Header header="My Water Chain"/>
        <div className="WhiteCard">
            <div className="whiteSpace">
            </div>
            <Authentication text="Login" onClickaction={loginClick} />
            <Authentication text="Register" onClickaction={registerClick}/>
        </div>
    </div>;
}

export default withRouter(StarterScreen);