React router structure for dashboard component

Active3 hr before
Viewed126 times

10 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, How are you rendering const container = ( <> <BrowserRouter> <App /> </BrowserRouter> </> ); Also did you remove the usage of Router from LoginDash – Shubham Khatri May 6 '20 at 10:49 ,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

Update your individual components like below

import {BrowserRouter} from "react-router-dom";

// Do not render app as a constant separetely, 

const container = (
       <App />  
load more v

By refactoring the layout structure from DashboardPage into its own component, we can use it as a parent component to wrap all child components needing it like this:,We are not using the component={} prop in Route to render our page component since we want to wrap them in our parent layout component.,We could turn our layout component into a gatekeeper and send any unauthorized users to the login page in our componentDidMount function as such:

We will start by building the routes for a simple Login and Dashboard page.

import { Router, Route, Switch, Redirect } from "react-router-dom";import LoginPage from './pages/LoginPage';import DashboardPage from './pages/DashboardPage';<Router>  <Switch>    <Route exact path="/login" component={LoginPage}    <Route exact path="/dashboard" component={DashboardPage}  </Switch></Route>
load more v

This code example on using route configs.,path - the route that’s handled by this config,The basic way to implement routing in React is to just render the <Route/> components directly, like the following example.

npx create - react - app routing - tutorial
cd routing - tutorial
npm install
load more v

 Pretag team - issue, fix, solve, resolve

import React, { Component } from 'react'  ,import React, { Component, Suspense } from 'react';  ,import React from 'react';  

 Pretag team - issue, fix, solve, resolve

The agent dashboard has 3 parts, a side menu, a top bar and content area to render components.,First, in my layouts folder, I created a folder called agent-dashboard to hold the agents dashboard files. I then created 2 files agent-dashboard-component.jsx and agent-dashboard-route.jsx,agent-dashboard-component.jsx

 Pretag team - issue, fix, solve, resolve

Due to the very nature of ReactJS, there is no defined folder structure, leaving it up to the developer to choose the one that best suits the project to be developed.

 Pretag team - issue, fix, solve, resolve

To get the history props on the stateful component, we must use HOC withRouter. As the stateless components, we can use react router hooks such as useHistory, useLocation, useParams and userRouteMatch.,1.4 4. Create a Dashboard Page,1.2 2. Install the react router component

 Pretag team - issue, fix, solve, resolve

Route allows you to map URL paths to different React components. For example, say we wanted to render the Dashboard component whenever a user navigates to the /home path. To do that, we’d render a Route that looks like this.,Congrats! You now have the power to create nested routes with React Router v5. Tell your Mom, she’ll be proud 🏅.,If we were to use useRouteMatch and log path and url in the most nested component, here’s what we would get.

<Route path='/home'>
   <Dashboard />
load more v

In order to navigate properly in the app, I set up with react-router and implement a 3 component auth check flow, one component checks for the visitors only pages, another component checks for the protected routes, and the third component encompasses all and does a general check for the application’s auth status, I know it sounds ambiguous now, but we are going to review the code struct and get into the nitty-gritty of things. ,This component set simply checks if the current route is amongst the visitors routes, if it is, then it checks the logged in status, if the app is logged in, it redirects the user to the /home route. ,Any route listed in this component set would be redirected to the Home route if their path is found in the visitors list.

    // import scenes here and make routes of them
    import React from 'react';
    import {Route} from 'react-router-dom';
    // import scenes here
    import {Dashboard, Settings, Login} from './Scenes'

    // auth checkers for checking if the routes are authorized
    import AppCheck from './Modules/AppCheck.jsx';
    import EnsureLoggedInContainer from './Modules/EnsureLoggedInContainer.jsx';
    import EnsureVisitorOnlyContainer from './Modules/EnsureVisitorOnlyContainer.jsx';

    const routes = (
                            <Route path="/login" component={Login} />
                            <Route exact path="/home" component={Dashboard} />
                            <Route path="/settings" component={Settings} />

    export default routes;
load more v

Other "router-component" queries related to "React router structure for dashboard component"