使用React Router时，我们经常需要将路由上的props传递给子组件。这是因为路由通常用于导航不同页面，并且我们常常需要在这些页面之间共享数据或进行一些操作。React Router提供了一种简单的方法来实现这一点，让我们来看看如何使用它。

npm install react-router-dom

yarn add react-router-dom

jsx
import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
function App() {
  const user = { name: 'John Doe' };
  return (
    
              path="/"
        exact
        render={(routeProps) => }
      />
              path="/about"
        render={(routeProps) => }
      />
    
  );
}
export default App;

jsx
import React from 'react';
function Home(props) {
  const { user } = props;
  return (
    
      
Welcome to the Home page
      
Hello, {user.name}!
    
  );
}
export default Home;

jsx
import React from 'react';
function About(props) {
  const { user } = props;
  return (
    
      
About Us
      
This is the About page.
      
Hello, {user.name}!
    
  );
}
export default About;

jsx
  path="/"
  exact
  component={() => }
/>

jsx
  {(routeProps) => }