React router not working as expected when pass state to history.push

Zayn

I have some form where i get user reservation details and then on submit i redirect user to other page by history.push('/somepath') but when i pass props by history.push({ pathname: '', state:{} }) then my url changes but my component is not rendered, this is the first time im facing this problem and now my head hurts, I dont know where the problem is or why this is happening. I have another form which works fine when i use history.push({ pathname: '', state:{} }) there.

App.js

import React from 'react';
import { connect } from 'react-redux';
import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom';
import Navbar from './components/Navbar/Navbar';
import Home from './pages/Home/Home';
import Login from './pages/Login/Login';
import Signup from './pages/Signup/Signup';
import Vehicles from './pages/Vehicles/Vehicles';
import About from './pages/About/About';
import VehiclesListView from './pages/Vehicles/VehiclesListView';
import Checkout from './pages/Checkout/Checkout';

function App({ user }) {
    const [ isAuth, setAuth ] = React.useState(false);

    return (
        <BrowserRouter basename="/">
            <Navbar isAuth={isAuth} setAuth={(v) => setAuth(v)} />
            <Switch>
                <Route exact path="/" component={Home} />
                <Route path="/vehicles" component={Vehicles} />
                <Route exact path="/reserve/checkout" component={Checkout} />
                <Route exact path="/reserve" component={VehiclesListView} />
                <Route path="/about" component={About} />

                {!user && (
                    <Switch>
                        <Route path="/login" render={() => <Login setAuth={(v) => setAuth(v)} />} />
                        <Route path="/signup" component={Signup} />
                    </Switch>
                )}
                <Redirect to="/" />
            </Switch>
        </BrowserRouter>
    );
}

const mapStateToProps = (state) => ({
    user: state.user.currentUser
});

export default connect(mapStateToProps)(App);

Form.js

const submit = (e) => {
    e.preventDefault();
    history.push({
        pathname: `/reserve?type=${type}&zipcode=${pickup.zip}`,
        state: {
            type,
            pickup,
            dropOff,
            pickupTime,
            dropTime
        }
    });
};
Muhammad Zeeshan

I think this should work for you.

history.push(`/reserve?type=${type}&zipcode=${pickup.zip}`, 
      state: {
            type,
            pickup,
            dropOff,
            pickupTime,
            dropTime
     }
);

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Onsubmit and history push is not working react router

React router: userHistory push function is not working as expected

React router history.push() not working from history.listen()

In React Router, how do you pass route parameters when using browser history push?

React Router not working as expected when using withStyles

Problems that need to be refreshed when using history.push() in react router

Browser History not working when going back in react-router-dom

React Router browserHistory not working as expected

Expected routing not working with React Router

React router redux lags one history step behing when router receives state

React/Router/MemoryRouter - how to pass history property and use push() in child component?

React router push to history and preserve relative path

React Router BrowserRouter History Push & Google Analytics

React router `this.props.history.push` - history not defined

How can I scroll to a page when doing React Router history push in my case

Problem when passing props using history.push() in react-router

in React, "history.push('/')" is not working in some component

How to update the router state on history.replace in react router?

React routing - id params in the URL is undefined when I pass it with history.push

Array push not working as expected in react app

react-router redirect not working as expected

react-router switch not working as expected

React State not working as expected, is there a better way?

React - object.assign on state not working as expected

Pass useState state to router component in React

React router, codes after history.push run?

How to push to History in React Router v4?

react router is only replacing the final route on history.push

React router this.props.history.push , pushing the location but not rendering the component