React router structure for dashboard component

user_8955676 0
Viewed 4263

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;
react-router reactjs
1 Answers

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

user_59281860
Related