React Router v4带/:id参数的路由渲染空白页问题求助

Hey there! Let's figure out why your dynamic /:id routes are rendering blank pages while regular routes work fine. I've run into this exact issue before, so let's break down the most common fixes step by step.

First, Check Your Route Order & Switch Component #

React Router matches routes in the order they're defined. If your dynamic route is placed before more specific routes, it'll catch all those paths first—and if your component doesn't handle those cases, it'll render nothing. Also, wrapping your routes in a Switch ensures only the first matching route renders, which avoids unexpected behavior.

Wrong Order (Causes Issues): #

import { Route } from 'react-router-dom';

function App() {
  return (
    <>
      <Route path="/:id" component={ItemDetail} /> {/* Catches /home, /about, etc. */}
      <Route path="/home" component={Home} />
      <Route path="/about" component={About} />
    </>
  );
}

Correct Setup: #

import { Switch, Route } from 'react-router-dom';

function App() {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      {/* Dynamic route goes LAST, so it only catches paths that don't match above */}
      <Route path="/:id" component={ItemDetail} />
    </Switch>
  );
}

Verify You're Accessing the id Parameter Correctly #

This is the most common mistake! How you access the parameter depends on whether you're using a class component or function component.

For Class Components: #

You need to pull id from this.props.match.params:

import React, { Component } from 'react';

class ItemDetail extends Component {
  render() {
    // Make sure you're using match.params, NOT just params!
    const { id } = this.props.match.params;
    return <div>Item ID: {id}</div>;
  }
}

export default ItemDetail;

For Function Components (React Router v4+): #

Use the useParams hook from react-router-dom:

import React from 'react';
import { useParams } from 'react-router-dom';

function ItemDetail() {
  const { id } = useParams();
  return <div>Item ID: {id}</div>;
}

export default ItemDetail;

If you're using an older approach (like withRouter HOC), double-check that you're wrapping your component correctly.

Simplify Your Component to Debug #

If the above fixes don't work, strip your ItemDetail component down to the absolute basics. Remove any data fetching, conditional rendering, or complex logic—just render the id parameter directly. If it shows up, the issue is in your component's internal code (like a failed API call, undefined variable, or conditional that's always false).

For example:

// Simplified test component
function ItemDetail() {
  const { id } = useParams();
  return <h1>Testing ID: {id}</h1>;
}

Check for Console Errors #

Open your browser's DevTools (F12) and go to the Console tab. Even if the page looks blank, there might be a JavaScript error (like trying to access undefined.title from an unloaded API response) that's preventing the component from rendering. Fixing those errors will often resolve the blank page issue.

Quick Note on <base href="/" /> #

Adding this to your index.html is usually only necessary for production deployments (like on Apache or Nginx servers). In Create React App's development server, this shouldn't affect your dynamic routes, so it's unlikely to be the root cause here.

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