javascript - React Router 中的链接冲突
问题描述
如果 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
所以我需要防止这种碰撞并使组件工作。
解决方案
React Router 将使用它在 Switch 语句中匹配的第一个组件,就像常规的 switch 语句一样。
所以 NotFound 和 404 组件应该移动到 Switch 组件的末尾,在它们上面有搜索和你想要的任何其他路由
推荐阅读
- embedded - 在 Keil 4 平台上将 .bmp 转换为 .pdf
- ios - 使用 Alamofire 获得空响应
- c# - 数据即将到期时的通知显示
- javascript - 我正在尝试使用 javascript 将图像添加到 HTML,但没有内容?
- three.js - 如何使用three.js为gltf模型制作动画
- python - 元素更改后列表始终不变
- python - 升级 pip AttributeError 时出错:“NoneType”对象没有属性“字节”
- json - JSON 到 JAXB XML KEY VALUE 属性
- javascript - 导出一个 Promise 以在另一个 Promise 中使用
- ios - QuickBlox 视频未获得视频流