Why is react-router-dom <Redirect> not working?

Question

Just trying to simply redirect once authenticated. figured i would convert my login screen to class component because i had a condition to redirect that was causing an endless loop. however once i converted my login screen, the redirect wasnt working at all. Im using react-router-dom v5.2...i read someone say that redirect isnt a part of v5+ and it changed to 'Navigate'...but it definitely was working at one point. and plus when trying to use 'Navigate' it says its not an exported package.

here the login screen:

class LoginScreen extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            username: '',
            password: '',
            password2: '',
            role: '',
            email: ''
        }
    }

    componentDidUpdate() {
        if (this.props.isAuthenticated) {
            console.log("Logged in")
            return (<Redirect to={'/dashboard'} />)
        }
    }

    render() {
        const { email, role, password, password2, username } = this.state
        return (
            <$.Container>
                <$.Wrapper>
                    <$.Logo />
                    <$.Form>
                        <$.Input
                            type="email"
                            value={email}
                            placeholder="Email"
                            onChange={e => this.setState({ email: e.target.value })}
                        />
                        <$.Input
                            type="username"
                            value={username}
                            placeholder="Username"
                            onChange={e => this.setState({ username: e.target.value })}
                        />
                        <$.Input
                            type="password"
                            value={password}
                            placeholder="Password"
                            onChange={e => this.setState({ password: e.target.value })}
                        />
                        <$.Input
                            type="password"
                            value={password2}
                            placeholder="Password Confirm"
                            onChange={e => this.setState({ password2: e.target.value })}
                        />
                        <$.Input
                            type="role"
                            value={role}
                            placeholder="Role"
                            onChange={e => this.setState({ role: e.target.value })}
                        />
                    </$.Form>
                    <$.Button onClick={() => this.props.login(email, password)}>Sign In</$.Button>
                    <$.Button onClick={() => this.props.register({ email, password, password2, role, username })}>Register</$.Button>

                    {this.props.message != null ?
                        this.props.error ?
                            <$.Error>{this.props.message}</$.Error>
                            : <$.Info>{this.props.message}</$.Info>
                        : null}
                </$.Wrapper>
            </$.Container >
        )
    }
}

const mapStateToProps = ({ auth }) => {
    const { isAuthenticated, message, error } = auth
    return { isAuthenticated, message, error }
}

const mapDispatchToProps = { login, register }

export default connect(mapStateToProps, mapDispatchToProps)(LoginScreen)

the condtion passes, as the log statement is output. but the redirect isnt redirecting.

heres app.js render:

<Provider store={store}>
  <Router>
    <div className="App">
      <Switch>
        {routes.map((route, index) => (
          route.private ?
            <PrivateRoute exact={route.exact} path={route.path} component={route.main} key={index} />
            :
            <Route exact={route.exact} path={route.path} component={route.main} key={index} />))}
      </Switch>
    </div>
  </Router>
</Provider>

page redirected to:

import React from 'react'

function DashboardScreen(props) {
  return (
    <div>
      <h1>dashboard screen</h1>
    </div>
  )
}

export default DashboardScreen

privateRoute component:

import React from 'react'
import { connect } from 'react-redux'
import { Route, Redirect } from 'react-router-dom'
import Sidebar from '../components/navigation/Sidebar'

function PrivateRoute({ component: Component, ...rest }) {

    return (
        <Route {...rest} render={(props) => props.isAuthenticated ? (
            <div style={{ display: 'grid', gridTemplateColumns: '200px auto' }}>
                <Sidebar role={'super-admin'} />
                <Component role={'test-role'} {...props} />
            </div>
        ) : (
                <Redirect to={{ pathname: '/', state: { referrer: props.location } }} />
            )}
        />
    )
}

const mapStateToProps = ({ auth }) => {
    const { isAuthenticated } = auth
    return { isAuthenticated }
}

export default connect(mapStateToProps)(PrivateRoute)

how can i get this redirect working?

Cymen Cymen · Accepted Answer · 2020-12-03T17:39:20

You need to put the Redirect in JSX that is going to be rendered. componentDidUpdate is not going to render that returned value. So instead, remove componentDidUpdate and change the top of your render to:

    render() {
        const { isAuthenticated } = this.props;
        const { email, role, password, password2, username } = this.state;

        if (isAuthenticated) {
            return (<Redirect to={'/dashboard'} />);
        }

        return (
            ...

Why is react-router-dom <Redirect> not working?

1 Answers