在浏览器中输入有效的 url 时，反应路由会一直重定向到主页

Question

我有这个路由配置，它工作得很好，只有一件事让我很烦恼：即使导航应用程序有效，当我 go 到地址栏并按 Enter 时，即使我不更改它，它也会将我重定向到/add-user url 并按回车键。

这是我的路线配置：

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>
    )
}

Answer 1

你是如何运行你的应用程序的？ 如果您使用 Webpack 您可能需要将 historyApiFallback historyApiFallback: true添加到开发服务器配置