reactjs - REACT.JS PATH EXACT NOT RENDERING

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;

So my problem is that when i put exact path on the component HomeScreen, it doesnt render anything and then the ProductScreen only appears on the browser. Then if the HomeScreen shows in the brower, whenever i clicked on a product, it only refreshes the HomeScreen and it doesn't show the ProductScreen.

Hope you guys could help me. This have been my problem for almost 3 days.

question from:https://stackoverflow.com/questions/65870774/react-js-path-exact-not-rendering

Answer 1

If this code can't work let me know

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;