Question

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

'Search'、'Result' 和 'Not Found' 是不同的组件和链接是不同的。

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

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

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

Answer 1

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

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

React Router 中的链接冲突

1 个答案: