React路由器:导航()从一个屏幕到另一个屏幕不传递状态/参数
React路由器:导航()从一个屏幕到另一个屏幕不传递状态/参数
提问于 2022-07-07 10:31:33
作为一个非常新的反应，我正面临一个问题，导航之间的两个组件。
我的应用程序如下: App.js：
<div className="App">
<AuthProvider>
<ThemeProvider theme={theme}>
<CssBaseline />
<CartProvider>
<SiteHeader/>
<div>
<Routes>
{getRoutes(routes)}
<Route path="/auth" element={<AuthPage />} />
<Route path="/cart" element={<CartPage />} />
<Route path="/search_results" element={<SearchResultPage />} />
<Route exact path="/_healthz" element={<HealthPage />} />
<Route path="/orders" element={<OrderPage />} />
<Route path="/category/:id" element={<CategoryPage />} />
<Route path="/product/:id" element={<ProductPage />} />
<Route path="/recipe/:id" element={<RecipePage />} />
<Route path="/" element={<HomePage />} />
</Routes>
</div>
</CartProvider>
</ThemeProvider>
</AuthProvider>
</div>如您所见，每个页面上都有SiteHeader组件。在这个SiteHeader组件上，我有一个搜索字段，虽然导航本身是工作的(SearchResultPage正在显示)，但触发一个导航()到SearchResultPage，传递给导航()的参数不会被传播：
const search = () => {
console.log("Calling search =>" + searchTerm);
navigate("/search_results",{ state: { searchText: searchTerm }});
}在SearchResultPage的代码部分下面：
export default function SearchResultPage(props) {
console.log(props);
let searchText = props.location.searchText我不明白为什么道具是空的，虽然我正确地填充了导航(路径，状态)
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-07-07 10:41:29
通过元素支柱呈现的react-router-dom v6路由组件不接收线路道具。
通过传递以下状态值，可以使用钩子获取要导航到该页面的状态：
const location = useLocation();
const searchText = location?.state?.searchText;要获得state，需要访问props.location.state，如果使用v5或更低版本，则需要访问后续的状态属性。
Stack Overflow用户
发布于 2022-07-07 10:42:31
更改这一行：
let searchText = props.location.searchText至
let searchText = props.location.state.searchText页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72896252
复制相关文章
相似问题
腾讯云开发者
