为什么我不能在路由器中使用查询字符串？

Question

我想在路由器中使用带有查询字符串的url路径，如下所示。

//App.js
          <Route
            path={"/my_account"}
            component={Pages.account}
          />
          <Route
            exact
            path={"/support_main/notice?page=1"}???? Lik this!!!!!!!!!
            component={Pages.support_notice_list}
          />

// link.js
                  <Link to={"/support_main/notice?page=1"} className="menu-list-link">
                    <ListItemText
                      primary={item.text}
                      className="munu-list-text"
                    />

在这种情况下，找不到页面.....:(

//App.js
          <Route
            exact
            path={"/support_main/notice"}???? OK
            component={Pages.support_notice_list}
          />

// link.js
                  <Link to={"/support_main/notice?page=1"} className="menu-list-link">
                    <ListItemText
                      primary={item.text}
                      className="munu-list-text"
                    />

在上述情况下，它可以正常工作。 有没有办法在路由器中使用查询字符串？

Answer 1

简单地说，这是因为 RRDv5 只处理匹配路径，而不是查询搜索字符串的任何部分。

对于路由路径匹配，只考虑"/support_main/notice"。为了更清楚地说明这一点，这里有一种更传统的方式来链接到"/support_main/notice" 并传递一个搜索字符串。在这里，路径和搜索字符串被拆分并显式传递。

<Link
  to={{
    pathname: "/support_main/notice",
    search: "?page=1"
  }}
>
  To notice
</Link>

当您链接到 "/support_main/notice?page=1" 时，搜索不是路径匹配的一部分。

Link to-object

到：对象

可以具有以下任何属性的对象：

• 路径名：表示要链接到的路径的字符串。

• 搜索：查询参数的字符串表示形式。

• hash：要放入 URL 的哈希值，例如#a 哈希。

• state：要持续到该位置的状态。

  <Link
    to={{
      pathname: "/courses",
      search: "?sort=name",
      hash: "#the-hash",
      state: { fromDashboard: true }
    }}
  />
  

考虑以下代码：

const Page1MatchPath = () => <h1>Page 1 matched by path</h1>;
const Page1MatchPathAndQuery = () => <h1>Page 1 matched by path and query</h1>;

export default function App() {
  return (
    <Router>
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>

        <ul>
          <li>
            <Link to="/support_main/notice?page=1">To notice (string)</Link>
          </li>
          <li>
            <Link
              to={{
                pathname: "/support_main/notice",
                search: "?page=1"
              }}
            >
              To notice (object)
            </Link>
          </li>
        </ul>

        <Switch>
          <Route
            path={"/support_main/notice?page=1"}
            component={Page1MatchPathAndQuery}
          />
          <Route path={"/support_main/notice"} component={Page1MatchPath} />
        </Switch>
      </div>
    </Router>
  );
}

请注意，即使完整路径和查询字符串在Switch 中首先列出is 不匹配，仅通过路径跳过和匹配。换句话说，它太特定于匹配"/support_main/notice"，但没有考虑到查询字符串进行匹配。

但是为什么查询字符串在 path 属性中不起作用？

这很可能是由于处理路径匹配的方式。底层 RRDv5 path 属性是 path-to-regex@^1.7.0 可以理解的字符串。在这种特定情况下，“？”字符被解释为optional parameter。

Optional

参数后缀可以是问号（?） 参数可选。这也将使前缀成为可选的。

var re = pathToRegexp('/:foo/:bar?', keys)
// keys = [{ name: 'foo', ... }, { name: 'bar', delimiter: '/', optional: true, repeat: false }]

re.exec('/test')
//=> ['/test', 'test', undefined]

re.exec('/test/route')
//=> ['/test', 'test', 'route']

更确切地说，Usage 也直接在注释中声明：

请注意：path-to-regexp 返回的RegExp 旨在与路径名或主机名一起使用。它无法处理查询 URL 的字符串或片段。