路由变更时获取路由自定义数据

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

// 定义路由配置
const routes = [
  {
    path: '/',
    component: Home,
    customData: { title: 'Home Page' }
  },
  {
    path: '/about',
    component: About,
    customData: { title: 'About Page' }
  }
];

function App() {
  return (
    <Router>
      <Switch>
        {routes.map((route, index) => (
          <Route
            key={index}
            path={route.path}
            render={(props) => <route.component {...props} customData={route.customData} />}
          />
        ))}
      </Switch>
    </Router>
  );
}

function Home(props) {
  const { customData } = props;
  return (
    <div>
      <h1>{customData.title}</h1>
      <p>Welcome to the Home Page</p>
    </div>
  );
}

function About(props) {
  const { customData } = props;
  return (
    <div>
      <h1>{customData.title}</h1>
      <p>Welcome to the About Page</p>
    </div>
  );
}

export default App;

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

function CustomComponent() {
  const location = useLocation();
  const customData = location.state?.customData;

  if (!customData) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>{customData.title}</h1>
      <p>Custom Data: {JSON.stringify(customData)}</p>
    </div>
  );
}

export default CustomComponent;