React Router v4通过Link传参后页面空白问题求助

Hey there! Let's troubleshoot why your SiteInfo page goes blank after clicking the Link component. I've worked through similar React Router v4 issues before, so here are the most likely fixes to check step by step:

1. First, verify your SiteInfo component implementation #

The most common cause of a blank page here is that your SiteInfo component isn't rendering valid JSX, or isn't properly accessing the route parameters.

• Make sure the component actually returns JSX (not null, undefined, or nothing at all). For example, don't forget the return statement if you're using a function component.
• Confirm you're accessing the parameters correctly from the props. In React Router v4, route params live under props.match.params, so your component should look something like this:

  const SiteInfo = (props) => {
    const { pid, cid } = props.match.params;
    return (
      <div className="site-info">
        <h2>Site Details</h2>
        <p>Project ID: {pid}</p>
        <p>Client ID: {cid}</p>
      </div>
    );
  };
  

• If you're using a class component, access the params via this.props.match.params instead.

2. Swap <Router> for <BrowserRouter> #

In React Router v4, the base <Router> component requires you to pass a history prop manually. For browser-based apps, you should use <BrowserRouter> (which wraps the base Router with HTML5 history support) instead—this is a super common mistake!

• Update your imports and Router setup:

  // Import BrowserRouter instead of plain Router
  import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
  
  // Keep your existing structure, just use BrowserRouter
  <Router>
    <div>
      <NavBar />
      <div className="content-wrapper">
        <div className="container-fluid">
          <Switch>
            {/* Your existing Routes here */}
          </Switch>
        </div>
      </div>
    </div>
  </Router>
  

3. Check the browser console for errors #

Open your browser's DevTools (F12 or Ctrl+Shift+I) and go to the Console tab. If there's a JavaScript error (like an undefined variable, missing import, or broken component logic), it will stop the component from rendering, resulting in a blank page. Fixing these errors will often resolve the issue immediately.

4. Double-check Route matching order and exact props #

Your <Switch> component renders the first matching Route, so your siteInfo Route is correctly placed first (since it's more specific than other routes). However, make sure you haven't accidentally added an exact prop to the siteInfo Route—if you did, it would only match /dashboard/siteInfo (without the params), which isn't what you want. Your current setup without exact is correct for this path.

5. Confirm all React Router imports are from react-router-dom #

It's easy to accidentally import components from react-router (the core library) instead of react-router-dom (the DOM-specific implementation). Make sure all your imports follow the example in step 2—this ensures you're using components designed for browser environments.

Give these steps a try, starting with checking the console (it's the fastest way to spot issues!). If you still run into trouble, share any error messages from the console or your full SiteInfo component code, and we can dig deeper.

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