React routing keep redirecting to Landing page when inputing valid url at browser

Viewed 43

I had this routing configurations and it works perfecly, only one thing keeps anoying me: even though navigating the app works, when I go to address bar and hit enter, it redirects me to /add-user even if I don't change the url and hit enter.

Here is my routes configuration:

function AppRoutes({ setLoading }) {
    const routes = [
    {
        key: keys.ADD_USR,
        path: '/add-user',
        // eslint-disable-next-line react/display-name
        renderComponent: (crumbs) => <AddUserData crumbItem={crumbs} />,
        crumbs: [
            {
                selected: 'false',
                link: `${prefix}/add-user`,
                accessibilityText: 'Add user',
                linkTtile: 'Add user',
            },
        ],
    },
    {
        key: keys.VIEW_USR,
        path: '/view-user',
        // eslint-disable-next-line react/display-name
        renderComponent: (crumbs) => <UserDetails crumbItem={crumbs} />,
        crumbs: [
            {
                selected: 'false',
                link: `${prefix}/view-user`,
                accessibilityText: 'View user',
                linkTtile: 'View user',
            },
        ],
    },
    {
        key: keys.USER_GRID,
        path: '/user-grid',
        // eslint-disable-next-line react/display-name
        renderComponent: (crumbs) => <UserGrid crumbItem={crumbs} />,
        crumbs: [
            {
                selected: 'false',
                link: `${prefix}/user-grid`,
                accessibilityText: 'User grid',
                linkTtile: 'User grid',
            },
        ],
    },
]
    return (
        <div className="app-container">
            <Switch>
                {routes.map(({ key, path, crumbs, renderComponent }) => {
                    return (
                        <Route key={key} path={path}>
                            {renderComponent(crumbs)}
                        </Route>
                    )
                })}
                <Redirect to="/add-user" />
            </Switch>
        </div>
    )
}

1 Answers

How are you running your app? If you are using Webpack you may need to add historyApiFallback: true to the dev server config

Related