React服务端渲染中如何基于动态路由路径预取数据？

Hey there, let's work through this together—getting SSR set up with react-router v4 and react-router-config can feel tricky at first, but once you understand how route matching works on the server, it clicks! Here's a step-by-step breakdown of how to grab that userSlugName and prefetch data for your User component:

1. Match Routes on the Server to Get the userSlugName #

First, you'll use react-router-config's matchRoutes method on the server. This function takes your route config and the incoming request path, and returns an array of matched routes—along with their match objects (which include the route params you need).

Here's how that looks in a typical Express server setup:

import { matchRoutes } from 'react-router-config';
// Import your route config (we'll define this next)
import routes from './routes';

// Your Express server route handler
app.get('*', (req, res) => {
  // Match the current request path to your routes
  const matchedRoutes = matchRoutes(routes, req.path);

  // Now we can access the matched route's params
  const userRouteMatch = matchedRoutes.find(route => route.route.component === User);
  if (userRouteMatch) {
    // This is your userSlugName from the URL!
    const { userSlugName } = userRouteMatch.match.params;
    console.log(userSlugName); // e.g., "john-doe" if the URL is /users/john-doe
  }

  // We'll expand on this with data fetching next...
});

And here's what your route config (routes.js) should look like:

import User from './components/User';

const routes = [
  {
    path: '/users/:userSlugName',
    component: User,
    exact: true
  },
  // Add your other routes here
];

export default routes;

2. Prefetch Data Using the Component's loadData Method #

Now that you have access to userSlugName on the server, you can call your User component's static loadData method and pass the params to it. We'll collect all data-fetching promises, wait for them to resolve, then render the app with the preloaded data.

Update your server handler to handle data fetching:

app.get('*', (req, res) => {
  const matchedRoutes = matchRoutes(routes, req.path);

  // Collect all data-fetching promises from matched routes
  const dataPromises = matchedRoutes.map(({ route, match }) => {
    // Only call loadData if the component has it defined
    return route.component.loadData ? route.component.loadData({ params: match.params }) : Promise.resolve(null);
  });

  // Wait for all data to load before rendering
  Promise.all(dataPromises)
    .then(fetchedData => {
      // Here, you'll typically store this data in a Redux store (or similar state management)
      // For example, if using Redux:
      const store = configureStore();
      // Assume your loadData method returns an action to dispatch, or directly populates the store
      // Adjust this based on your state setup
      fetchedData.forEach(data => {
        if (data) store.dispatch(setUser(data));
      });

      // Now render your app with the preloaded store
      const appHtml = renderToString(
        <Provider store={store}>
          <StaticRouter location={req.path} context={{}}>
            <RenderRoutes routes={routes} />
          </StaticRouter>
        </Provider>
      );

      // Inject the initial state into the HTML so the client can pick it up
      res.send(`
        <!DOCTYPE html>
        <html>
          <head>
            <title>User Profile</title>
          </head>
          <body>
            <div id="root">${appHtml}</div>
            <script>
              // Make server state available to the client
              window.__INITIAL_STATE__ = ${JSON.stringify(store.getState())};
            </script>
            <script src="/client-bundle.js"></script>
          </body>
        </html>
      `);
    })
    .catch(err => {
      // Handle errors (e.g., user not found)
      res.status(404).send('User not found');
    });
});

Then update your User component's loadData method to accept the params:

User.loadData = ({ params }) => {
  // Fetch user details using the slug from params
  return fetch(`/api/users/${params.userSlugName}`)
    .then(res => res.json())
    .then(userData => {
      // Return the user data (or dispatch an action if using Redux)
      return userData;
    });
};

3. Adjust the Client-Side and Component Logic #

On the client, you'll need to initialize your state management (like Redux) with the server's initial state to avoid re-fetching data. Here's how that looks in your client entry file:

import { hydrate } from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import configureStore from './store/configureStore';
import { RenderRoutes } from 'react-router-config';
import routes from './routes';

// Grab the initial state from the server
const initialState = window.__INITIAL_STATE__;
const store = configureStore(initialState);

// Hydrate the app (instead of render, since we're using SSR)
hydrate(
  <Provider store={store}>
    <BrowserRouter>
      <RenderRoutes routes={routes} />
    </BrowserRouter>
  </Provider>,
  document.getElementById('root')
);

Finally, update your User component's componentDidMount to only fetch data if it doesn't already exist (from the server's initial state):

componentDidMount() {
  // Assume user data is passed in via props (from Redux or direct props)
  if (!this.props.user) {
    this.props.fetchUserDetails(this.props.match.params.userSlugName);
  }
}

Key Notes to Remember #

• matchRoutes is the glue that connects server-side request paths to your react-router-config routes, giving you access to params.
• Always wait for all loadData promises to resolve before rendering—otherwise, your server-rendered HTML won't have the data.
• Ensure the client's initial state matches the server's exactly to avoid hydration mismatches.

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