How to fix Reactjs admin and frontend routing with react-router-dom v6 BrowserRouter insted of Switch

user_7098307 0
Viewed 904

I want to build a reactjs website which handle both frontend pages as well as admin end pages. I tried to split admin and frontend components using the following method

index.js

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

App.js

import { BrowserRouter, Route, Routes } from "react-router-dom";

import Customer from "./components/layouts/customer";
import Admin from "./components/layouts/admin";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='/' element={<Customer />} />
        <Route path='admin' element={<Admin />} />
      </Routes>
    </BrowserRouter>
  );
}
export default App;

I wound like to handle all frontend routes by adding routes inside the componet Customer
Also all admin end routes inside the compoent Admin as follows

admin.js

import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Dashboard         from '../../screens/admin/dashboard';

const Admin = () => {
    return (

            //  <div>Admin Route</div>  This works , but the below Routes doesnt work


            <BrowserRouter>
                <div className='container-fluid'>
                    <div className='row'>
                        <ul className='sidebar-submenu '>
                            <li>
                                <NavLink to='/admin/all-products' activeClassName='active'>All Products</NavLink>
                            </li>
                            <li>
                                <NavLink to='/admin/add-product' activeClassName='active'>Create Product</NavLink>
                            </li>
                        </ul>
                        <div className='col-md-10 admin-content'>
                            <Routes>
                                <Route exact path='' element={<Dashboard />} />
                            </Routes>
                        </div>
                    </div>
                </div>
           </BrowserRouter>
    )
}

export default Admin;

customer.js

import React from "react";
import { BrowserRouter , Route, Routes } from "react-router-dom";


import Home         from '../../screens/frontend/home';
import Signin       from '../../screens/frontend/signin';
import Signup       from '../../screens/frontend/signup';

const Customer = () => {
    return (

        //  <div>Frontend Route</div>  This works , but the below Routes doesnt work

        <BrowserRouter>
            <Routes>
                <Route exact path='' element={<Home />}  />
                <Route exact path='signin' element={<Signin />}  />
                <Route exact path='signup' element={<Signup />}  />
            </Routes>
        </BrowserRouter>
    )
}

export default Customer;

http://localhost:3000/admin and http://localhost:3000/ gives blank page I think my inner routes didn't works

I cannot able to add routes inside the inner components, Someone please help me to get rid of this issue?

react-router-dom react-router reactjs
1 Answers

With react-router-dom you need only one router providing the routing context to the app, so remove the nested BrowserRouter components in Customer and Admin. Since you are nesting Route components then the parent routes need to specify wildcards to they can continue to match rendered nested Route components.

App

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='/*' element={<Customer />} />
        <Route path='/admin/*' element={<Admin />} />
      </Routes>
    </BrowserRouter>
  );
}

Customer

const Customer = () => {
  return (
    <Routes>
      <Route path='/' element={<Home />}  />
      <Route path='/signin' element={<Signin />}  />
      <Route path='/signup' element={<Signup />}  />
    </Routes>
  )
}

Admin

const Admin = () => {
  return (
    <div className='container-fluid'>
      <div className='row'>
        <ul className='sidebar-submenu '>
          <li>
            <NavLink to='/admin/all-products' activeClassName='active'>All Products</NavLink>
          </li>
          <li>
            <NavLink to='/admin/add-product' activeClassName='active'>Create Product</NavLink>
          </li>
        </ul>
        <div className='col-md-10 admin-content'>
          <Routes>
            <Route path='/' element={<Dashboard />} />
          </Routes>
        </div>
      </div>
    </div>
  )
}

Edit how-to-fix-reactjs-admin-and-frontend-routing-with-react-router-dom-v6-browserro

user_86908570
Related