反应路由器dom没有正确重定向

Question

That's my code, when i try to go in / or /home the components are rendered, but when i want to go in /login or /contacts it doesn't render, i don't know where is the problem, can someone help me?

 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

From our comment conversation if I understand correctly you are looking to do the following:

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>
)