使用 React Router v6 将数据从一个组件传递到另一个组件

Question

我正在开发一个包含 2 个组件的天气应用程序项目。由于 2 个组件使用不同的 API 但仍使用相同的位置查询，因此我想将查询从组件 1 传递到组件 2 作为 API 查询。我如何传递查询，因为我在按钮中使用 react router v6 useNavigation 在组件之间切换。这是代码

    const api = {
        key : "5753c1f304f16ccb493d187a7351c953", 
        base : "https://api.openweathermap.org/data/2.5/"
    }

    const [weather, setWeather] = useState ('')
    const [query, setQuery] = useState ('')

 const search = (e) =>{
        if (e.key === 'Enter') {
        axios.get(`${api.base}weather?q=${query}&units=metric&appid=${api.key}`).then 
        ((response) => {
            console.log(response.data)
            setWeather(response.data)
            setQuery('')
        } )
    }}

const navigate = useNavigate();

return (
    <>
      <div className='App'>
        <div className='search'>
          <input
          type='text'
          className='search-bar'
          value={query}
          onChange={e => setQuery(e.target.value)}
          placeholder='Search Location...'
          onKeyPress={search} />
          <img className='button-icon' src={button} onClick={search}/>
        </div>
            <button className='viewStats' onClick={()=>navigate('/forecast')}>VIEW Forecast</button>

 </>
    
  )
}

export default Home

Answer 1

React Router 6 的发布给 api 带来了巨大的变化。

您可以将状态从组件 1 传递到组件 2，例如：

从 组件 1 传递您的状态，如下所示：

navigate('/your-route', { state : { query : ' your-query ' }})

您可以在 组件 2 中接收状态，如下所示：

const { state } = useLocation();
const { query } = state;

以上解决方案仅适用于 React Router v6。

使用 React Router v6 将数据从一个组件传递到另一个组件

passing data from one component to another with react router v6

reactjs

react-router