时间戳

首页 > 解决方案 > 为什么 React 重定向对我不起作用？

reactjs - 为什么 React 重定向对我不起作用？

问题描述

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

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;

这是我的主要 app.js 文件：

import React from 'react';
import StarterScreen from './components/StarterScreen.jsx';
import LoginScreen from './components/LoginScreen.jsx';
import RegisterScreen from './components/RegisterScreen.jsx';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import {BrowserRouter,Route,Switch} from 'react-router-dom';
function App() {
  function loginClick()
    {
      console.log("Login");
    }
    function registerClick()
    {
      console.log("Register");
    }
  return (
    <div className="App">
    <BrowserRouter>
    <Switch>
    <Route component={StarterScreen} exact path="/"></Route>
    <Route component={LoginScreen} exact path="/register"></Route>
    <Route component={StarterScreen} exact path="/login"></Route>
    </Switch>
    </BrowserRouter>
    </div>
  );
}

export default App;

当我点击登录时，它只是冻结，之后什么也没有发生。屏幕确实响应，但没有发生登录操作，并出现一堆错误： 在此处输入图像描述

标签： reactjs

解决方案

尝试：

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

注意这里，我添加withRouter了包装你的组件并从 react-router-dom 导入它。然后我props.history.push用来导航

推荐阅读