React router structure for dashboard component - reactjs

Question

Hi i am new developer in ReactJS. I have a problem and want to learn how to make routing for dashboard. My root component is App component and it calls only dashboards of my pages. But I want to call different components inside of dashboard such as Login , Register etc. When I use "Link" in anywhere, How can I do this ? Could you help me at this issue?
index.tsx for BrowserRouter
import {BrowserRouter} from "react-router-dom";
const app =<App /> ;
const container = (
<>
<BrowserRouter>
{app}
</BrowserRouter>
</>
);
my router App.tsx component:
import { Route, Switch } from "react-router-dom";
import LoginDash from "../containers/login/LoginDash"
class App extends Component {
render() {
return (
<div className="App">
<Switch>
<Route path="/Login" exact component={LoginDash}></Route>
<Route path="/" exact component={LoginDash}></Route>
</Switch>
</div>
);
}
}
export default App;
My dashboard LoginDash.tsx:
import {BrowserRouter as Router, Route,Switch} from "react-router-dom"
import LoginPart from "../../components/login/left/LoginPart";
import RegisterPart from "../../components/login/left/RegisterPart";
import AnitamionPart from '../../components/login/right/AnimationPart';
export const Login = () => {
return (
<div className="login-container">
<div className="row login-row" >
<div className="login-left-part" >
<Router>
<Switch>
<Route exact path = "/Login" component={LoginPart}></Route>
<Route exact path = "/Register" component={RegisterPart}></Route>
</Switch>
</Router>
</div>
<div className=" login-right-part" >
<AnitamionPart></AnitamionPart>
</div>
</div>
</div>
)
}
export default Login;

Answer 1

First of all, you only need to use one instance of BrowserRouter in your App, Since you already wrap App component with BrowserRouter that would be enough
Secondly, if you specify exact attribute on Routes, no nested Routes will ever match. Make sure you don't use Route with exact prop if the component has any nested Route defined
Lastly, you only need to render LoginDash on / route, /Login handling can be done separately as a nested Route
Update your individual components like below
import {BrowserRouter} from "react-router-dom";
// Do not render app as a constant separetely,
const container = (
<>
<BrowserRouter>
<App />
</BrowserRouter>
</>
);
import { Route, Switch } from "react-router-dom";
import LoginDash from "../containers/login/LoginDash"
class App extends Component {
render() {
return (
<div className="App">
<Route path="/" component={LoginDash}></Route>
</div>
);
}
}
export default App;
export const Login = () => {
return (
<div className="login-container">
<div className="row login-row" >
<div className="login-left-part" >
<Switch>
<Route exact path = "/Login" component={LoginPart}></Route>
<Route exact path = "/Register" component={RegisterPart}></Route>
</Switch>
</div>
<div className=" login-right-part" >
<AnitamionPart></AnitamionPart>
</div>
</div>
</div>
)
}
export default Login;
Working demo