Reactjs 我怎样才能把这样的路线/项目？搜索="；？

我被分配了一项任务，在该任务中，我必须放置带有以下url的路由：

/items？search=

以加载

SearchBarScreen

组件

我有此代码，我正在使用react router dom软件包：

    export const AppRouter = () => {
    return (
        <Router>
        <Switch>
            <Route exact path="/items?search=" component={SearchBarScreen} />
            <Route exact path="/product/:id" component={ProductDetailScreen} />
            <Route path="/" component={HomeScreen} />
            <Route component={NotFoundScreen} />
        </Switch>
        </Router>
    );

在这种情况下，将加载路线

主屏幕

（/）

：(

---

我做错了什么？

当您有多个具有类似名称的路径时，将使用

精确的
参数：
对于代码中的exmplae，当您转到
//localhost:3000/items？search=XDDD
时，路由器将遍历所有已定义的路由并返回它找到的第一个匹配项。这是它找到的第一件事
//localhost:3000/
，并执行
主屏幕
组件。
exact
参数禁用路由的部分匹配，并确保仅当路径与当前url完全匹配时才返回路由。
因此，在这种情况下，您应该向
/
路线添加精确的：

 <Router>
        <Switch>
            <Route path="/items?search=" component={SearchBarScreen} />
            <Route path="/product/:id" component={ProductDetailScreen} />
            <Route  exact  path="/" component={HomeScreen} />
            <Route component={NotFoundScreen} />
        </Switch>
        </Router>

当您有多个具有相似名称的路径时，将使用
精确
参数：
对于代码中的exmplae，当您转到
//localhost:3000/items？search=XDDD
时，路由器将遍历所有已定义的路由并返回它找到的第一个匹配项。这是它找到的第一件事
//localhost:3000/
，并执行
主屏幕
组件。
exact
参数禁用路由的部分匹配，并确保仅当路径与当前url完全匹配时才返回路由。
因此，在这种情况下，您应该向
/
路线添加精确的：

 <Router>
        <Switch>
            <Route path="/items?search=" component={SearchBarScreen} />
            <Route path="/product/:id" component={ProductDetailScreen} />
            <Route  exact  path="/" component={HomeScreen} />
            <Route component={NotFoundScreen} />
        </Switch>
        </Router>

您应该将不带查询字符串的URI提供给路由组件。因此，如果您想在该URL
http://localhost:3000/items?search=
，您应该执行以下操作：

<Route exact path="/items" component={SearchBarScreen} />

另一种方法是放下
exact
道具

我推荐的解决方案是前者。这里有一个沙盒：
您应该将不带查询字符串的URI提供给路由组件。因此，如果您想在该URL
http://localhost:3000/items?search=
，您应该执行以下操作：

<Route exact path="/items" component={SearchBarScreen} />

另一种方法是放下
exact
道具

我推荐的解决方案是前者。这里有一个沙箱：
您可以这样做

您可以使用此自定义挂钩

useLocation钩子是从react路由器dom导入的

 useQuery() {
  return new URLSearchParams(useLocation().search);
}


然后在组件中

const query = useQuery();

你可以这样做

您可以使用此自定义挂钩

useLocation钩子是从react路由器dom导入的

 useQuery() {
  return new URLSearchParams(useLocation().search);
}


然后在组件中

const query = useQuery();

你的目标是什么？能够访问
SearchBarScreen
中的
XDDD
值？@code猴子我的目标是使用
http://localhost:3000/items?search=
在浏览器中（请参阅我的路由器的配置）您的目标是什么？能够访问
SearchBarScreen
中的
XDDD
值？@code猴子我的目标是使用
http://localhost:3000/items?search=
在浏览器中（请参阅我的路由器的配置）谢谢你的帮助，我正在检查你的代码，我有一个问题…这个url
https://lkqfj.csb.app/ite*ms？search=somequery
，（查看
ite*ms
）它应该显示
未找到
，但是
主屏幕
已加载。@yavg这是因为
没有确切的道具。它现在就在那里，所以如果你现在尝试，它会按照你的预期运行。谢谢你的帮助，我正在检查你的代码，我有一个问题…这个url
https://lkqfj.csb.app/ite*女士earch=somequery
，（查看
site*ms
）它应该显示
未找到
，但
主屏幕已加载。@yavg这是因为
没有确切的道具。它现在就在那里，所以如果您现在尝试，它会按照您的预期运行。