如何在react router dom中使用带参数路由解决登录注册路径404问题

问题根因 #

react-router-dom v5的Route组件path属性仅匹配URL的路径段，不会匹配?之后的查询参数，你将查询参数直接写在path配置中，会导致路由无法命中，最终触发404重定向。

解决方案 #

方案1：保留查询参数形式 #

不要将查询参数写入路由的path配置，统一匹配/admin路径，再通过读取location.search的查询参数判断渲染对应组件即可。
修改后的路由配置代码如下：

// 其他导入、组件代码保持不变
class App extends Component {
  render() {
    return (
      <Suspense
        fallback={
          <Loading />
        }
      >
        <Router>
          <Switch>
            <Page path="/" component={Home} />
            <Page path="/products" component={Products} />
            <Page path="/products/:product" component={Product} />
            <Page path="/contact" component={Contact} />
            {/* 替换原有两个带查询参数的路由配置，统一匹配/admin路径 */}
            <Page 
              path="/admin" 
              render={props => {
                const searchParams = new URLSearchParams(props.location.search)
                if (searchParams.get('login') === 'true') {
                  return <Login {...props} />
                }
                if (searchParams.get('register') === 'true') {
                  return <Register {...props} />
                }
                // 参数不匹配时可按需重定向到对应页面
                return <Redirect to="/" />
              }} 
            />
            <Route
              exact
              path="/page-not-found"
              component={PageNotFound}
            />
            <Redirect to="/page-not-found" />
          </Switch>
        </Router>
      </Suspense>
    );
  }
}

你的自定义Page组件会自动透传props到内部的Route组件，无需额外修改Page组件的代码。如果项目中引入了query-string等查询参数解析库，也可以替换原生URLSearchParams使用，逻辑完全一致。

方案2：改用路径参数形式 #

如果你不需要强制使用查询参数，也可以直接把登录/注册标识放在路径段中，配置更直观：

// 直接配置两个独立路由即可，不需要额外参数判断
<Page path="/admin/login" component={Login} />
<Page path="/admin/register" component={Register} />

对应访问路径为/admin/login和/admin/register，兼容性更好。

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