React路由异常：输入有效URL回车后始终重定向至/add-user页面

你的路由配置存在两个核心问题：

1. 路由路径前缀不统一：面包屑链接使用了${prefix}/xxx格式，但Route组件的path直接写/xxx，导致实际访问的URL（带prefix）和路由匹配路径（不带prefix）不一致。地址栏回车时浏览器刷新页面，React Router匹配当前完整URL失败，触发最后的Redirect。
2. 默认重定向规则过于宽泛：无条件的Redirect会匹配所有未被路由覆盖的路径，包括本应匹配的带前缀URL，最终强制跳转到/add-user。

1. 统一路由路径前缀 #

将Route的path与面包屑链接的前缀保持一致，确保匹配逻辑正确：

function AppRoutes({ setLoading }) {
    const routes = [
    {
        key: keys.ADD_USR,
        path: '/add-user',
        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',
        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',
        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 }) => {
                    // 拼接prefix，确保路由路径与实际访问URL一致
                    const fullPath = `${prefix}${path}`;
                    return (
                        <Route key={key} path={fullPath} exact>
                            {renderComponent(crumbs)}
                        </Route>
                    )
                })}
                {/* 仅在根路径匹配时重定向，避免误触发 */}
                <Redirect from="/" to={`${prefix}/add-user`} exact />
            </Switch>
        </div>
    )
}

2. 优化默认重定向规则 #

把原来的无条件Redirect改为仅匹配根路径（/）时重定向，避免覆盖正常的路由匹配。如果需要处理404场景，可以新增一个404页面组件替代重定向。

3. 可选：配置Router的basename #

如果应用部署在子路径下，推荐直接在外层Router组件中设置basename属性，无需手动给每个链接加前缀：

// 外层Router配置示例
<BrowserRouter basename={prefix}>
  <AppRoutes setLoading={setLoading} />
</BrowserRouter>

这样所有路由和链接都会自动带上前缀，彻底避免路径不一致的问题。

内容的提问来源于stack exchange，提问作者Akshay phalphale