React Router 中的链接冲突答案

【问题标题】：Link collision in React RouterReact Router 中的链接冲突
【发布时间】：2025-12-09 07:25:02
【问题描述】：

如果 url 无效，我正在尝试实现“未找到”页面以重定向用户。但是，未找到的页面链接会以某种方式与搜索结果发生冲突，并在提交搜索输入后将用户重定向到“未找到”。

“搜索”、“结果”和“未找到”是不同的组件和链接是不同的。

父应用组件中的浏览器路由器代码 （此处定义的搜索结果的状态）

const [searchResult, setSearchResult] = useState([]);

<BrowserRouter>          
   <Switch>         
    <Route path=''> 
      <NotFound />
    </Route>
    <Route path='*'>
      <Redirect to ='/404' />
    </Route>
    <Route path='/search'>
      <Result 
      searchResult={searchResult}
      setSearchResult={setSearchResult}
       />
     </Route>
   </Switch>
</BrowserRouter>

在当前情况下，搜索栏组件工作并显示如果我从浏览器路由器中删除“未找到”的结果。
搜索结果显示在“结果”组件中。

搜索组件

（如果我从历史记录中删除第一个“/search”，它将不起作用。）

搜索结果链接

> http://localhost:3000/search/search?q=adidas

如果我从浏览器路由器中删除“未找到”，则可以找到该项目。否则，路径会发生冲突并重定向到“未找到组件”

function Search({setSearchResult}) {
   
    const history = useHistory();
    const location = useLocation();
    const searchInput = useRef();

    const params = new URLSearchParams(location.search);
    const q = params.get('q');
    
    function handleSubmit(e){
        e.preventDefault();
        history.push(`/search/search?q=${searchInput.current.value}`)
    }

    useEffect(()=>{
        if(q){
            searchInput.current.value=q ? q : '';

            const productSearch = products.results
            .filter(item => item.title.toLowerCase().includes(q.toLowerCase()))
            .map((item)=>
            <Col sm={4} key={item.id} className="mt-3">
                 <Link to ={`/ProductDetails/${item.id}`} >
                      <Card>
                          <Card.Img variant="top" src={item.src[0]}/>
                          <Card.Body className="text-dark text-center">
                              <Card.Title className="font-secondary">{item.title}</Card.Title>
                              <Card.Text className="font-secondary">
                                  {item.detail}
                              </Card.Text>
                          </Card.Body>
                      </Card>
                 </Link>
                </Col>
              
            );
            setSearchResult(productSearch);
        }
    },[q])
    return (
        <>
            <Form onSubmit={handleSubmit} inline>
               <FormControl 
               htmlFor='search' 
               type="text" 
               id="search"
               placeholder="Search items" 
               ref={searchInput}
               name={q}
               />
                <Button type='submit' id="searchBtn" onClick={handleSubmit} className="font-secondary" >{searchIcon}</Button>    
           </Form>
          
        </>
    )
}

导出默认搜索

结果组件

搜索结果显示在此处。

function Result({searchResult}) {
        return (
            <>
            <Container>
                <Row className="mt-5">
                <h2 className="font-display">Search Results</h2>
                </Row>
                <Row>
                    {searchResult}
                </Row>
            </Container>
            </>
        )
    }
    
    export default Result

所以我需要防止这种碰撞并使组件正常工作。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

React Router 将使用它在 Switch 语句中匹配的第一个组件，就像常规的 switch 语句一样。

所以 NotFound 和 404 组件应该移动到 Switch 组件的末尾，在它们上面带有搜索以及您想要的任何其他路由

【讨论】：