redirecting with reactjs inside of a function

Question

i'm trying to set up a redirect inside of a function after i set a cookie.

I had tried using redirect with history and a bunch of other but they each gives me a different error

const Form = () => {
    const { values, handleChange, handleSubmit } = useForm(SignUp);


    function SignUp() {
        axios.post('http://localhost:3000/users', {
            "name": values.name,
            "email": values.email,
            "password": values.password
        })
        .then(function (response) {
           bake_cookie('jwtToken', response.data.token)
           //trying to redirect after this line 
        })
    }

    return (
        <div>
            <Container component="main" maxWidth="xs">
            </Container>
        </div>
    )
}

What are the ways you're trying to redirect? What errors are you getting? — Jake Worth
– Jake Worth, Commented Jul 17, 2019 at 16:26
i tired using render () { return ( <BrowserRouter> <Route path='/' component={MyComponent} /> </BrowserRouter> ) } just after setting the cookie and try to use the history and tried return <Redirect to='/login' /> — Chris Allen
– Chris Allen, Commented Jul 17, 2019 at 16:34
i deleted them all after i couldn't get them to work so i can't tell you what the errors said. — Chris Allen
– Chris Allen, Commented Jul 17, 2019 at 16:38

dave · Accepted Answer · 2019-07-17 16:29:44Z

1

It depends on what you are using for routing. The simple solution is just:

.then(function (response) {
    bake_cookie('jwtToken', response.data.token)
    window.location.href = '/path/to/whatever'; 
})

If you are using react-router:

import { withRouter } from 'react-router-dom'
const Form = withRouter(({history}) => {
    const { values, handleChange, handleSubmit } = useForm(SignUp);


    function SignUp() {
        axios.post('http://localhost:3000/users', {
            "name": values.name,
            "email": values.email,
            "password": values.password
        })
        .then(function (response) {
           bake_cookie('jwtToken', response.data.token)
           history.push('/path/to/whatever') 
        })
    }

    return (
        <div>
            <Container component="main" maxWidth="xs">
            </Container>
        </div>
    )
})

answered Jul 17, 2019 at 16:29

dave

65.1k6 gold badges81 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chris Allen Over a year ago

i was missing const Form = withRouter(({history}) => {

Enrico Camponogara Da Silva · Accepted Answer · 2019-07-17 16:39:15Z

To redirect with the react-router-dom in React you can use the prop history that is passed to each child component of <Switch />. For error prevention I advise you to create a folder with constants for the path names. Example:

export default function () {
    return (
        <BrowserRouter>
            <Switch>
                <Route path={ROUTES.DASHBOARD} exact component={Dashboard}/>
                <Route path={ROUTES.REGISTER} component={Register}/>
                <Route path={ROUTES.LOGIN} component={Authenticate}/>
                <Route path={ROUTES.MEDIA} component={Media}/>
                <Route path={ROUTES.FAVORITES} component={Favorites}/>
                <Route path={ROUTES.PROFILE} component={Profile}/>
                <Route path={ROUTES.ADD_MOVIE} component={AddMovie}/>
                <Route component={NotFind}/>
            </Switch>
        </BrowserRouter>
    )
}

Now on the component you want to redirect. We have a property received. Code sample:

function Authenticate({user, history}) {


    useEffect(function () {
        if (user.isAuthenticated) history.push(ROUTES.DASHBOARD);
    }, [history, user]);
}

Collectives™ on Stack Overflow

redirecting with reactjs inside of a function

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related