React Router切换新路由后无内容显示问题求助

Hey there! Let's break down why your routes aren't rendering content when you switch pages, and fix it step by step.

First, looking at your code snippet, there are a couple of clear issues:

• Your <BrowserRouter> tag is incomplete (cut off at <BrowserRouter...) and doesn't wrap the routing logic properly
• If you're using react-router-dom v6+, the <Switch> component has been replaced with <Routes>, and the syntax for <Route> has changed
• Your <Headerbar> (which likely contains navigation links) should be inside the <BrowserRouter> context to work correctly

Option 1: If you're using react-router-dom v6+ (current stable version) #

Here's the corrected App.jsx code:

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { Headerbar } from './HeaderBar.jsx';
import Home from './Home.jsx';
import About from './About.jsx';

export default class App extends React.Component {
  render() {
    return (
      <div style={{textAlign: 'center'}}>
        <BrowserRouter>
          {/* Headerbar needs to be inside BrowserRouter if it uses Link components */}
          <Headerbar />
          {/* Use Routes instead of Switch in v6 */}
          <Routes>
            {/* Route uses element prop to pass the component as JSX */}
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
          </Routes>
        </BrowserRouter>
      </div>
    );
  }
}

Option 2: If you're using react-router-dom v5 (older version) #

If you haven't upgraded to v6 yet, fix your incomplete code and ensure proper nesting:

import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import { Headerbar } from './HeaderBar.jsx';
import Home from './Home.jsx';
import About from './About.jsx';

export default class App extends React.Component {
  render() {
    return (
      <div style={{textAlign: 'center'}}>
        <BrowserRouter>
          <Headerbar />
          {/* Complete the Switch and Route structure */}
          <Switch>
            {/* Add 'exact' to root route to avoid matching all paths starting with '/' */}
            <Route exact path="/" component={Home} />
            <Route path="/about" component={About} />
          </Switch>
        </BrowserRouter>
      </div>
    );
  }
}

Key Fixes Explained: #

• Complete BrowserRouter Wrapping: All routing-related components (including navigation links in Headerbar) must be inside <BrowserRouter> to access the routing context.
• v6 vs v5 Syntax:
  • v6 uses <Routes> instead of <Switch>, and <Route> requires the element prop (passing the component as JSX, like <Home />).
  • v5 uses <Switch> with the component prop, and needs exact on the root route to avoid matching all paths starting with /.
• Properly Closed Tags: Make sure all JSX tags are properly opened and closed (your original code cut off <BrowserRouter without closing it).

Also, double-check that your Headerbar component uses <Link> from react-router-dom for navigation (instead of regular <a> tags) to ensure client-side routing works without full page reloads.

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