React Router v4 重定向将状态从搜索传递到结果

使用React Router v4可以轻松地实现重定向和传递状态的功能。在本文中，我们将探讨如何通过搜索页面将状态传递到结果页面，并通过重定向实现无缝的页面跳转。

npm install react-router-dom

javascript
// SearchPage.js
import React, { useState } from 'react';
import { withRouter } from 'react-router-dom';
const SearchPage = ({ history }) => {
  const [searchTerm, setSearchTerm] = useState('');
  const handleSearch = () => {
    // 在此处处理搜索逻辑
    // ...
    // 将搜索词作为参数传递到结果页面
    history.push(`/results?searchTerm=${searchTerm}`);
  };
  return (
    
       setSearchTerm(e.target.value)} />
      搜索
    
  );
};
export default withRouter(SearchPage);

javascript
// ResultPage.js
import React from 'react';
import { withRouter } from 'react-router-dom';
const ResultPage = ({ location }) => {
  const searchParams = new URLSearchParams(location.search);
  const searchTerm = searchParams.get('searchTerm');
  return (
    
      
搜索结果: {searchTerm}
      {/* 在此处显示搜索结果 */}
    
  );
};
export default withRouter(ResultPage);

javascript
// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';
import SearchPage from './SearchPage';
import ResultPage from './ResultPage';
const App = () => {
  return (
    
      
         } />
        
        
      
    
  );
};
export default App;