React Router v6：Props传递与路由状态管理深度解析

<Route
  exact
  path="/"
  element={(props) => ( // 错误：element 不接受函数
    <ContactList
      {...props} // 这里的 props 是空的，因为 element 接收的是 JSX
      contacts={contacts}
      getContactId={removeContactHandler}
    />
  )}
/>

<Route
  path="/"
  element={(
    <ContactList contacts={contacts} getContactId={removeContactHandler} />
  )}
/>

import React, { useState } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import ContactList from './ContactList'; // 假设 ContactList 组件在单独的文件中
import Home from './Home'; // 假设有其他组件

function App() {
  const [contacts, setContacts] = useState([
    { id: '1', name: 'Alice', email: 'alice@example.com' },
    { id: '2', name: 'Bob', email: 'bob@example.com' },
  ]);

  const removeContactHandler = (id) => {
    setContacts(contacts.filter(contact => contact.id !== id));
    console.log(`Contact with ID ${id} removed.`);
  };

  return (
    <Router>
      <div className="App">
        <h1>My Contact App</h1>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route
            path="/contacts"
            element={(
              <ContactList
                contacts={contacts}
                getContactId={removeContactHandler}
              />
            )}
          />
          {/* 其他路由 */}
        </Routes>
      </div>
    </Router>
  );
}

export default App;

import React from 'react';
import { useLocation, useNavigate, useParams } from 'react-router-dom';

const ContactList = ({ contacts, getContactId }) => {
  // 使用 React Router v6 Hooks 访问路由状态
  const location = useLocation();
  const navigate = useNavigate();
  const params = useParams(); // 如果路由路径中包含动态参数，例如 /contacts/:id

  console.log('Current location:', location);
  console.log('URL parameters:', params);

  const handleNavigateToHome = () => {
    navigate('/'); // 程序化导航到首页
  };

  return (
    <div>
      <h2>Contact List</h2>
      <button onClick={handleNavigateToHome}>Go to Home</button>
      <ul>
        {contacts.length === 0 ? (
          <li>No contacts available.</li>
        ) : (
          contacts.map((contact) => (
            <li key={contact.id}>
              {contact.name} - {contact.email}
              <button onClick={() => getContactId(contact.id)}>Remove</button>
            </li>
          ))
        )}
      </ul>
      {/* 示例：展示当前路径 */}
      <p>Current Path: {location.pathname}</p>
    </div>
  );
};

export default ContactList;