如何将React Router位置属性传递给组件？

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

// 定义组件
const Home = (props) => {
  // 访问位置属性
  const { location } = props;
  
  return (
    <div>
      <h1>Home</h1>
      <p>当前路径：{location.pathname}</p>
    </div>
  );
};

const About = (props) => {
  const { location } = props;
  
  return (
    <div>
      <h1>About</h1>
      <p>当前路径：{location.pathname}</p>
    </div>
  );
};

const App = () => {
  return (
    <Router>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
};

export default App;