将自定义道具传递给专用路由- React Typescript

npm install react-router-dom

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

interface Props {
  customProp: string;
}

const MyComponent: React.FC<Props> = ({ customProp }) => {
  return <div>{customProp}</div>;
};

const App: React.FC = () => {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/route1">Route 1</Link>
            </li>
            <li>
              <Link to="/route2">Route 2</Link>
            </li>
          </ul>
        </nav>

        <Route path="/route1" render={() => <MyComponent customProp="Prop for Route 1" />} />
        <Route path="/route2" render={() => <MyComponent customProp="Prop for Route 2" />} />
      </div>
    </Router>
  );
};