Question

我将React.js应用程序用作Wordpress管理区域内的小部件。一些用户配置wordpress url的方式可以使用查询参数来设置页面视图，例如：

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

我希望能够将我的链接和路由设置为符合此结构，以便页面重新加载不会中断。我无法执行此操作，可以添加斜杠/子文件夹，但是添加?和<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 />也以＆section = 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与问号匹配

1 个答案: