React Router v4：<Route> 组件无法将 url 与问号匹配

Question

我在 Wordpress 管理区域内使用 React.js 应用程序作为小部件。有些用户配置wordpress urls的方式可以使用query参数来设置page view，例如：

domain.com/wpFolder/wp-admin/options-general.php?page=settingspage

我希望能够将我的链接和路由设置为符合此结构，以便页面重新加载不会中断。我无法做到这一点，添加 slashes/subfolders 很好，但是当我添加 ? 时，<Route /> 不再匹配。示例：

      <StyledMaterialLink // This is a <Link /> wrapped by Styled Components
        component={RouterLink}
        to={`/wptest2/wp-admin/options-general.php?`}> 
        <Tab
          label="See Current Coupons"
          value={seeCurrentCoupons}
          onClick={() => {
            console.log(location.href, `=====location.href=====`); 
            setAdminView(seeCurrentCoupons)
          }}
        />
    </StyledMaterialLink>

    <Route
      path={`/wptest2/wp-admin/options-general.php?`}
      render={props => {

        return (
          <CurrentCouponChannel.Provider
            value={state.currentCouponsAndTargets}>
            <ViewCoupons />
          </CurrentCouponChannel.Provider>
        )
      }}
    />

最后，我希望上面的 <Route path /> 也以 §ion=view-coupons 结尾。

是否可以通过这种方式硬编码查询字符串参数，以便在使用我的框架重新加载后正常工作？

Answer 1

搜索参数不是路径的一部分。您可以通过 props.location

访问这些值

    <Route
      path={`/wptest2/wp-admin/options-general.php`}
      render={props => {
        // do something with props.location.search

库 https://www.npmjs.com/package/query-string 在这里很有用。

React Router v4：<Route> 组件无法将 url 与问号匹配

React Router v4: <Route> component unable to match urls with question marks

reactjs

react-router

react-router-v4