反应。使用 react-router-dom 在 React 中通过单击按钮重定向

Question

因此，我试图了解如何通过事件点击在我的应用中进行正确的重定向？我将 react-router-dom 重定向逻辑放入按钮 event handler 中，但它不起作用。

我哪里做错了？

import React, { Component, Fragment } from 'react';
import Preloader from '../Preloader/Preloader'
import preloaderRunner from '../../Modules/PreloaderRunner'
import { Redirect } from 'react-router-dom';
import axios from 'axios';

class LoginPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            navigate: false
        }
    }

    handleClick = () => {
        console.log('Button is cliked!');
        return <Redirect to="/employers" />
    }

    render() {
        return (
            <Fragment>
                <Preloader/>
                <h1>This is the Auth Page!</h1>
                {this.state.navigate === true
                ? <div>
                    <div>You already loggined!</div> 
                    <button onClick={this.handleClick}>Go to the Employers List!</button>
                  </div>
                : <div>
                    <form>
                       // some code...
                    </form>
                </div>}
            </Fragment>
        )
    }
}

export default LoginPage;

Answer 1

单击处理程序返回的内容不会由您的组件呈现。您必须引入一个可以设置的新状态属性，然后在属性包含重定向到的路径时呈现 <Redirect> 组件：

class LoginPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            navigate: false,
            referrer: null,
        };
    }

    handleClick = () => {
        console.log('Button is cliked!');
        this.setState({referrer: '/employers'});
    }

    render() {
        const {referrer} = this.state;
        if (referrer) return <Redirect to={referrer} />;

        // ...
    }
}

或者，您可以按照@alowsarwar 的建议呈现一个 <Link> 组件，而不是使用点击处理程序呈现您自己的按钮，该组件将在您点击时为您进行重定向。

Answer 2

我相信您希望通过点击将用户带到“/employers”。那么你需要使用react-router-com中的Link。理想情况下，在像“handleClick”这样的 React 事件中，应该更改状态而不是 return JSX（这是错误的方法）

import React, { Component, Fragment } from 'react';
import Preloader from '../Preloader/Preloader'
import preloaderRunner from '../../Modules/PreloaderRunner'
import { Redirect, Link } from 'react-router-dom';
import axios from 'axios';

class LoginPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            navigate: false
        }
    }

    handleClick = () => {
        this.setState({ navigate: true});
    }

    render() {
        return (
            <Fragment>
                <Preloader/>
                <h1>This is the Auth Page!</h1>
                {this.state.navigate === true
                ? <div>
                    <div onClick="this.handleClick">If you want to enable link on some event (Sample test case fyr)</div> 
                    {this.state.navigate ? <Link to='/employers'/> : null}
                  </div>
                : <div>
                    <form>
                       // some code...
                    </form>
                </div>}
            </Fragment>
        )
    }
}

export default LoginPage;

反应。使用 react-router-dom 在 React 中通过单击按钮重定向

React. Redirect by button click in React with react-router-dom

reactjs

react-router-dom