REACT.JS 路径完全不渲染

Question

import {BrowserRouter , Route} from 'react-router-dom';
import React from 'react';
import HomeScreen from './screens/HomeScreen';
import ProductScreen from './screens/ProductScreen';
function App() {
  return (
   <BrowserRouter>
      <div className="grid-container">
        <header className="row">
        <div>
           <a className="brand" href="index.html">SanaMall.</a>
        </div>
        <div>
            <a className="link" href="/cart"> Cart</a>
            <a className="link" href="/signin"> Sign In</a>
        </div>
    </header>
    <main>
       <Route  path= "/" component={HomeScreen}/>
       <Route path="/product/:id" component={ProductScreen}/>
    </main>
    <footer className="row center">
        All rights reserved.
    </footer>
    </div>
    </BrowserRouter>
  );
}
export default App;

所以我的问题是，当我在组件 HomeScreen 上放置确切路径时，它不会呈现任何内容，然后 ProductScreen 仅出现在浏览器上。然后，如果 HomeScreen 显示在浏览器中，每当我点击产品时，它只会刷新 HomeScreen 而不会显示 ProductScreen。

希望你们能帮助我。这是我近 3 天的问题。

Answer 1

如果此代码不起作用，请告诉我

import {BrowserRouter ,Switch, Route} from 'react-router-dom';
import React from 'react';
import HomeScreen from './screens/HomeScreen';
import ProductScreen from './screens/ProductScreen';
function App() {
  return (
   <BrowserRouter>
      <div className="grid-container">
        <header className="row">
        <div>
           <a className="brand" href="index.html">SanaMall.</a>
        </div>
        <div>
            <a className="link" href="/cart"> Cart</a>
            <a className="link" href="/signin"> Sign In</a>
        </div>
    </header>

       <Switch>    
        <Route exact path="/" >
          <HomeScreen />
        </Route>
        <Route path="/product/:id">
          <ProductScreen />
        </Route>
      </Switch>

    
    <footer className="row center">
        All rights reserved.
    </footer>
    </div>
    </BrowserRouter>
  );
}
export default App;

Answer 2

使用 Switch 独占渲染每条路由https://reactrouter.com/core/api/Switch