Реагировать роутер dom не правильно перенаправить

Question

Это мой код, когда я пытаюсь go в / или / home отобразить компоненты, но когда я хочу go в / login или / contacts, он не отображается, я не знаю, где это проблема, кто-то может мне помочь?

 import React, { Component } from "react"
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import ContentInfo from './components/Card/Card';
import LoginCard from './components/LoginCard/LoginCard';
import ContactsCard from './components/ContactsCard/ContactsCard';
import RegisterCard from './components/RegisterCard/RegisterCard';
import {Root} from './components/Root';
import {HomeRoot} from './components/HomeRoot';
import Panel from './components/Panel/Panel';
import './components/particles.css';

class App extends Component {

  render(){
    return (
      <Router>
            <Switch>
              <Route path={"/"} exact>
                <Root>
                  <Route component={ContentInfo} />
                  <Route path={"/login"} exact component={LoginCard} />
                  <Route path={"/contacts"} component={ContactsCard} />
                  <Route path={"/register"} component={RegisterCard} />
                </Root>
              </Route>
              <Route path={"/home"}>
                <Switch>
                  <HomeRoot>
                    <Route component={Panel} />
                  </HomeRoot>
                </Switch>
              </Route>
            </Switch>
      </Router>
    );
  }
}

export default App;

Answer 1

Из нашего комментария, если я правильно понимаю, вы собираетесь сделать следующее:

import { useLocation } from 'react-router-dom'

.
.
.

const location = useLocation()

return (
<Router>
        <Switch>
           {location.pathname === '/home' ? <HomeRoot /> : <Root />}
           <Route exact path={"/"} component={ContentInfo} />
           <Route path={"/login"}  component={LoginCard} />
           <Route path={"/contacts"} component={ContactsCard} />
           <Route path={"/register"} component={RegisterCard} />
           <Route path={"/home"} component={Panel}>
          </Route>
        </Switch>
  </Router>
)