如果 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
所以我需要防止这种碰撞并使组件正常工作。
答案 0 :(得分:0)
React Router 将使用它在 Switch 语句中匹配的第一个组件,就像常规的 switch 语句一样。
所以 NotFound 和 404 组件应该移动到 Switch 组件的末尾,带有搜索和任何其他你想要的路由,在它们上面