React Router: navigate()从一个屏幕到另一个屏幕不传递状态/参数

Question

作为React的新手，我面临着在两个组件之间导航的问题。

我的应用程序如下: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组件上，我有一个搜索字段，触发一个navigation()到SearchResultPage虽然导航本身正在工作(SearchResultPage正在显示)，但是传递给navigate()的参数没有被传播:

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

我不明白为什么props是空的尽管我正确地填充了导航(路径，状态)

Answer 1

react-router-domv6通过元素prop渲染的路由组件不接收路由道具。

你可以使用hook来获取你正在导航到那个页面的状态，通过传递一些状态值，如下所示:

const location = useLocation();
const searchText = location?.state?.searchText;

要获得state，您需要访问props.location.state，然后如果您使用v5或以下，则需要访问随后的状态属性。

Answer 2

改变这一行:

let searchText = props.location.searchText

let searchText = props.location.state.searchText