我想要一个显示四个住宿列表的主页，并能够通过点击跳转到每个住宿的特定页面。

我不知道错误来自哪里。

我的代码产生

Uncaught TypeError with a message of "Cannot read properties of undefined (reading 'map')"

APP.js：

import React from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import AccommodationList from './components/AccommodationList';
import AccommodationDetails from './components/AccommodationDetails';
//import accommodationsData from './data/accommodations.json';
import './styles/accommodations.css';

export default function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<AccommodationList/>}/>
                <Route path="/accommodation/:id" element={<AccommodationDetails/>}/>
            </Routes>
        </BrowserRouter>
    );
}

ACCOMMODATIONDETAILS.js：

import React from 'react';
import accommodationsData from '../data/accommodations.json';
import '../styles/accommodations.css';

function AccommodationDetails(props) {
    const accommodation = accommodationsData.find((a) => a.id === props.match.params.id);

    return (
      <div>
        <h2>{accommodation.title}</h2>
        <p>{accommodation.description}</p>
        <p>Prix : {accommodation.price}€</p>
        <img src={accommodation.imageURL} alt={accommodation.altTxt} />
      </div>
    );
  }

export default AccommodationDetails;

ACCOMMODATIONLIST.js

import React from 'react';
import { Link } from 'react-router-dom';
import allaccommodations from '../data/accommodations.json';
import '../styles/accommodations.css';

export default function AccommodationList(props) {
    return (
        <div>
            <div>
                <h1>Chez Nestor</h1>
                <AccommodationList allaccommodations={allaccommodations} />
            </div>
            <div className='container'>
                {props.allaccommodations.map(accommodation => (
                    <div key={accommodation.id}>
                        <figure>
                            <img src={accommodation.imageURL} alt={accommodation.altTxt} />
                            <figcaption>
                                <h2>{accommodation.title}</h2>
                                <p>{accommodation.description}</p>
                                <p>Prix : {accommodation.price}€</p>
                                <Link to={`/accommodation/${accommodation.id}`}>Voir plus</Link>
                            </figcaption>
                        </figure>
                    </div>
                ))}
            </div>
        </div>
    );
}

console.log(allaccommodations)

我尝试更改名称，或将术语“元素”更改为“组件”。这个错误来自哪里，我该如何修复它？