React路由报错：Cannot read property 'location' of undefined问题排查与解决

Hey there, let's break down why this error is popping up and get your Amazon clone back on track!

Root Cause #

The core issue lies in your App.js import statement—you’ve mixed up React Router components, which breaks the routing context entirely:

• You incorrectly imported BrowserRouter as Route instead of BrowserRouter as Router. This means the <Router> component you’re using isn’t the proper routing provider, so child components can’t access the location object they rely on.
• On top of that, your route order and missing exact prop would cause the root route (/) to match every path (including /checkout), even after fixing the import.

Step-by-Step Fix #

1. Correct the React Router Import in App.js #

Replace your current import line with this:

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'

This properly aliases BrowserRouter to Router (the component that provides essential routing context) and imports the actual Route component for defining your routes.

2. Fix Route Matching Behavior #

In React Router v5, the Switch component matches routes from top to bottom. To ensure /checkout loads correctly:

• Either move the /checkout route above the root route, or add the exact prop to the root route to only match when the path is exactly /.

Here’s the fully corrected App.js component with both fixes:

import React from 'react'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import Header from './Header'
import Home from './Home'

function App() {
  return (
    <Router>
      <div className="app">
        <Switch>
          {/* Place more specific routes first */}
          <Route path="/checkout">
            <Header />
            <h1>Hello I am a checkout page</h1>
          </Route>
          {/* Root route with exact to avoid matching all paths */}
          <Route exact path="/">
            <Header />
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  )
}

export default App

Why This Works #

• The corrected import ensures the Router component is a valid BrowserRouter instance, which creates the routing context that Route components need to access location and other routing data—fixing the "Cannot read property 'location' of undefined" error.
• Reordering routes (prioritizing specific paths) or using exact ensures that when you navigate to /checkout, the Switch picks the correct route instead of falling back to the root route.

After making these changes, restart your development server (if needed) and head to /checkout—the error should be gone, and your checkout page will render as expected!

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