如何向被父组件包裹的动态创建路由传递history对象

Hey there, let's break down why your About and Contact components aren't receiving those route-related props like history—and how to fix it!

The Root Cause #

Right now, you're defining your route components like this:

component: () => <About />

When you wrap the component in an arrow function like this, you're manually rendering the component yourself instead of letting React Router's Route handle it. The Route component only automatically injects history, location, and match props when you pass a direct component reference (not an arrow function that returns the component). That's why your props in About are coming through as an empty object.

Fix 1: Pass the Component Reference Directly (Most Recommended) #

The simplest fix is to pass the component itself instead of wrapping it in an arrow function. This lets Route handle injecting all the route props automatically:

// Update your accessedRoutes array
let accessedRoutes = [
  { path: '/about', component: About },
  { path: '/contact', component: Contact }
].map(o => {
  return (
    <Route key={o.path} exact={true} path={o.path} component={o.component} />
  )
})

Note: I added a key prop to the Route (best practice for mapped components) and fixed the path to include a leading slash (/about instead of about) to avoid routing issues.

Fix 2: Use the render Prop to Manually Pass Route Props #

If you need to pass additional custom props to your component along with the route props, use the render prop instead of component. This lets you explicitly pass the route props to your component:

let accessedRoutes = [
  { path: '/about', component: About },
  { path: '/contact', component: Contact }
].map(o => {
  return (
    <Route 
      key={o.path}
      exact={true} 
      path={o.path} 
      render={(routeProps) => <o.component {...routeProps} customProp="some-value" />} 
    />
  )
})

Here, routeProps contains history, location, and match—we use the spread operator (...) to pass them all to your component, along with any custom props you need.

Fix 3: Use React Router Hooks (For Function Components) #

Since your About component is a function component, you can skip props entirely and use React Router's built-in hooks to access route-related data directly:

Update your About.js:

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

const About = () => {
  const history = useHistory();
  const location = useLocation();
  
  console.log('history:', history);
  console.log('location:', location);
  
  return (
    <div>About</div>
  )
}
export default About;

This is great for deeper components where passing props through multiple levels would be a hassle.

One quick side note: Make sure your Router component remains the parent of all route-related components (which it does in your current code, since dynamicRoutes is rendered inside Router once the loader is done). That's required for the hooks and route props to work correctly.

内容的提问来源于stack exchange，提问作者Beginner