解决React路由属性中获取undefined的问题
<p>我想把一些属性(<code>loading</code>和<code>getContacts</code>)发送给ReactJS中的一个组件。我使用路由来获取每个路径,但是目标组件中的结果是undefined。这是怎么回事?</p>
<pre class="brush:php;toolbar:false;">const App = () => {
const [getContacts , setContacts] = useState([]);
const [loading , setLoading] = useState(false);
return(
<div className='App'>
<Navbar/>
<Routes>
<Route path='/' element = {<Navigate to ="/contacts"/>}/>
<Route path='/contacts' loading= {loading} contacts= {getContacts} element= {<Contacts/>} />
<Route path="/contacts/add" element = {<AddContact/>}/>
<Route path = "/contacts/:contactId" element = {<ViewContact/>}/>
<Route path = "/contacts/edit/:contactId" element = {<EditContact/>}/>
<Route path="*" element={
<div className='text-light py-5'>
Not Found!
</div>}
/>
</Routes>
</div>
);
export default App;</pre>
<p>在Contact.jsx中,我有:</p>
<pre class="brush:php;toolbar:false;">const Contacts = ({ contacts, loading }) => {
return (
<>
<div>{contacts}</div>
<div>{loading}</div>
</>
);
};
export default Contacts;</pre>
<p>但是它们都是undefined。</p>