React：刷新页面时无法访问组件道具

Question

当我在我的应用上重新加载“详细信息”页面（不是主页）时，出现错误：

“TypeError: 'country' 的属性 'flag' 未定义，因此无法解构。”

我猜由于数据是从主页传递到另一个，如果我们不从主页转到详细信息页面，我们就无法从 API 加载数据。

经过一些研究，我得出结论，我必须修改 webpack.config.js 中的一些内容，但是当我使用以下命令创建我的应用程序时：

npx create-react-app my-app

我很难找到 webpack 配置文件，我什至不确定这是否是解决方案。

主页上的卡片（点击后会转到特定国家/地区的详细信息页面）：

import { Link } from 'react-router-dom';

const Card = ({country}) => {
    const {flag, name, population, subregion, capital} = country;

    const new_population = population.toLocaleString();

    const newTo = {
        pathname: `/details/${name}`,
        country: country
    };

    return <Link to={newTo} className='card'>

        <img src={flag} alt={name}></img>
        <div className='subCard'>
            <h2>{name}</h2>
            <p>Population: {new_population}</p>
            <p>Region: {subregion}</p>
            <p>Capital: {capital}</p>
        </div>

    </Link>;
}

export default Card;

点击卡片后进入的页面：

import { useLocation, Link } from 'react-router-dom';

const Details = () => {
    const { country } = useLocation();
    
    const { 
        flag, 
        name, 
        nativeName, 
        population, 
        region, 
        subregion, 
        capital, 
        topLevelDomain, 
        currencies, 
        languages, 
        borders } = country; 
        //arrays: currencies, languages, borders, topLevelDomain

    return <div className='details'>
        <Link to={`/`} >Back</Link>
        <img src={flag} alt={name}></img>
        
            //etc
    </div>;
export default Details;
}

我的主页：

import React, { useState, useEffect } from 'react';
import { useFetch } from './useFetch'
import Card from './Card';
import Searchbar from './Searchbar';

const Home = () => {
    const [url, setUrl] = useState('https://restcountries.eu/rest/v2/all');
    

    const { isLoading, countries, isError } = useFetch(url); //custom hook

    if(!isLoading && !isError){
        return <div className='home'>
        <Searchbar setUrl={setUrl}>
            <DropdownMenu setRegion={setRegion}></DropdownMenu>
            
        </Searchbar>
        <div className='cards'>
          {countries.map((country, index)=>{
              return <Card key={index} id={index} country={country} ></Card> 
          })} 
        </div>
    </div>;
//etc

我的App.js（不知道有没有必要）：

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import Navbar from './Navbar';
//page(s)
import Home from './Home'
import Error from './Error'
import Details from './Details'

function App() {
  return (
    <Router>
    <Navbar></Navbar>
    <Switch>
      <Route exact path='/'>
        <Home />
      </Route>
      <Route path='/details/:id' children={<Details/>}></Route>
      <Route path='*'>
        <Error></Error>
      </Route>  
    </Switch>
  </Router>
  );
}

export default App;

您能否告诉我修改 webpack 配置文件是否是最好的解决方案？如果不是我该怎么办？

顺便说一句，如果您需要我没有在这里显示的代码，我很抱歉，告诉我我会修改我的帖子。

Answer 1

如果要使用<Link> 组件传递数据，则需要将其添加到state 变量中。

在您的卡片组件中，您的 newTo 变量应该是：

const newTo = { 
   pathname: `/details/${name}`,
   state: {country: country}
}

React Router - Link component

然后要访问详细信息页面上的country 变量，请使用

const {state} = useLocation()

const country = state.country

Answer 2

这不是 Webpack 配置。

问题是您没有正确输入国家/地区。在您的详细信息功能中，console.log(countries) 并查看传入的内容。

Answer 3

不建议在Link 中保留状态，恕我直言。因为获得状态的唯一方法是单击卡片组件。但是这里的问题是，一旦您点击进入相应页面的卡片并且点击 refresh 。您在location 下的状态将为undefined，因为刷新页面会导致您的应用重新渲染。

因此，如果您想跨路线保留状态，那么我建议您使用

React Context 或其他状态管理库，例如 redux 或 mobx