How can I open a new webpage when user clicks on a category using React Router?

This is my index.js

ReactDOM.render(
    <div>
      <Home />
      <App />
    </div>,
  document.getElementById('root')
)    

App.js for all ROUTES in the app

function App() {
  return(
    <Router>
      <Switch>
        <Route path="/cpu" exact component={Info}/>   
      </Switch>
    </Router>
  )
}

Navs function in Home.class

function Navs(){
  return(
    ReactDOM.render(
      <div className="Navs">
        <ul>
          <Router>
            <Link to="/cpu">CPU</Link>
            <Link to="/Monitors">MONITORS</Link>
            <Link to="/GPU">GPUS</Link>
            <Link to="/Ram">RAMS</Link>
            <Link to="/Keyboards">KEYBOARDS</Link>
            <Link to="/Mouse">MOUSE </Link> 
            <Link to="/Others">OTHER ACCESORIES</Link>
          </Router>
        </ul>
      </div>
      ,document.getElementById('Navs')
    )
  )
}

CPU.jsx(The component tobe rendered when user clicks on cpu category

function Info(){
  render(
    <h1>Hello in cpus </h1>
  )
  return null
}

The problem is when I Navigate on cpu it shows the same Home page but with the cpu component rendered in it..But the path is changed to “http://localhost:3000/cpu”

Answer

This is because in your index.js you are including <Home /> and then <App />. For not showing Home you should include it into App as another route. Eg.:

index.js

ReactDOM.render(
      <div>
      <App />
      </div>,
      document.getElementById('root')
    ) 

App:

function App() {
        return(
    <Router>
    <Switch>
      <Route path="/cpu" exact component={Info}/> 
      <Route path="/" exact component={Home}/> 
    </Switch>
    </Router>
        )
      }