history.push() giving 404

Question

I am trying to use redirect user on authentication using history but for some reason, it is giving me 404. These are my routers and with them, I am exporting history.

export let history = createBrowserHistory();

<Router history={history}>
        <div>
            <Header />
        </div>
        <Switch>
            <Route path="/" component={LoginPage} />
            <Route path="/dashboard" component={ExpenseDashboardPage} />
            <Route path="/add" component={AddExpense} />
            <Route path="/edit/:id" component={EditExpensePage} />
            <Route path="/help" component={HelpPage} />
            <Route component={NotFoundPage} />
        </Switch>
    </Router>

in my app.js I am importing it and using it. In my console, I have logout so it should redirect to '/' but is not.

let hasRendered = false;
const renderApp = () => {
    if (!hasRendered) {
        ReactDOM.render(jsx, document.getElementById("root"));
        hasRendered = true;
    }
}

firebase.auth().onAuthStateChanged((user) => {
    if (user) {
        console.log("Log in");
        store.dispatch(startSetExpense()).then(() => {
            renderApp();
            if (history.location.pathname === '/') {
                history.push('/dashboard');
            }
        });
    }
    else {
        console.log('Logout');
        renderApp();
        history.push('/');
    }
});

Edit 1: I tried to debug the program and found that the problem is not with routes but Router or history. The routes are working perfectly fine with BrowserRouter.

Edit 2: renderApp just render the app

let hasRendered = false;
const renderApp = () => {
    if (!hasRendered) {
        ReactDOM.render(jsx, document.getElementById("root"));
        hasRendered = true;
    }
};

Clicking other links as well as giving me 404. There is some problem with the Router I think. — Utkarsh Goel, Jul 27 '20 at 06:46
I am using webpack dev-server and using this config: ```devServer: { contentBase: path.join(__dirname, 'public'), historyApiFallback: true, publicPath: '/dist/' },``` — Utkarsh Goel, Jul 27 '20 at 07:06

score 2 · Accepted Answer · answered Oct 31 '20 at 15:55

Use react-router v5.2.0 and history v4.9.0 to make this work.

https://codesandbox.io/s/quizzical-dan-z3725

OR

Try using BrowserHistory https://reactrouter.com/web/example/basic

seems there is some issue with customHistory when we use different version

Originally answered here: https://stackoverflow.com/a/64623542/1723410

score 1 · Answer 2 · answered Jul 27 '20 at 06:46

1

Update the Route paths like below:

<Switch>
    <Route path="/" component={LoginPage} exact />
    <Route path="/dashboard" component={ExpenseDashboardPage} />
    <Route path="/add" component={AddExpense} />
    <Route path="/edit/:id" component={EditExpensePage} />
    <Route path="/help" component={HelpPage} />
    <Route path="*" component={NotFoundPage} />
</Switch>

answered Jul 27 '20 at 06:46

Ali Torki

1,929
16
26

This did not solve the problem. There is some problem with API fallback I believe. I removed exact while debugging to check if it is being directed to some other router or not but that was not the case. – Utkarsh Goel Jul 27 '20 at 07:05
What was your goal to write the renderApp? Because I think it's the problem that you have. – Ali Torki Jul 27 '20 at 07:35
renderApp is like my main component that contains all the routes and stuff. So after renderApp runs, it should redirect to either '/' or '/dashboard'. – Utkarsh Goel Jul 27 '20 at 07:41
So, In this case, you have to render the app normally and use the Redirect component to do this. – Ali Torki Jul 27 '20 at 07:46
I would have used it but the problem is that this app.js is not inside route. So I can't use it. – Utkarsh Goel Jul 27 '20 at 07:57
Please push a sample of your main codes into the codesandbox.com to find the problem. – Ali Torki Jul 27 '20 at 08:50

score 0 · Answer 3 · edited Aug 23 '20 at 16:52

Please update like this and check. I normally use it this way and it works fine:

<Switch>
    <Route exact path="/" component={LoginPage} />
    <Route exact path="/dashboard" component={ExpenseDashboardPage} />
    <Route exact path="/add" component={AddExpense} />
    <Route exact path="/edit/:id" component={EditExpensePage} />
    <Route exact path="/help" component={HelpPage} />
    <Route path="/" component={NotFoundPage} />
</Switch>

history.push() giving 404

3 Answers3