Question 383331 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – React Router V6 Setup

I am working on a small e-commerce app using React.js.
While setting app the router v6, nothing is rendering. There should be a mistake in the configuring the router even in App.js or Index.js. here is a snapchot from the index.js code

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </>
);

reportWebVitals();

App.js

import React from 'react';
import Cart from './pages/Cart';
import Home from './pages/Home';
import ProductDetails from './pages/ProductDetails';
import {
  RouterProvider,
  Route,
  createBrowserRouter,
  createRoutesFromElements,
  Link
} from 'react-router-dom';

const Root = () => {
  return (
    <>
      <Link to="/">Home</Link>
    </>
  );
};

const appRouter = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<Root />}>
      <Route path="home" element={<Home />} />
      <Route path="cart" element={<Cart />} />
      <Route path="product-details" element={<ProductDetails />} />
    </Route>
  )
)

function App() {
  return <RouterProvider router={appRouter} />;
}

export default App;

Please let me know if I am missing any import in index.js or if there is any mistake in App.js.

I tried online resources, tried to import createBrowserRouter and other but it did not work.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thank you very much, I modified the App.js accordingly but it is not rendering. However it is still not rendering, maybe some import is missing in index.js

    import React from 'react';
import ReactDOM from 'react-dom/client'; 
import './index.css'; import App from './App'; 
import reportWebVitals from './reportWebVitals'; 

const root = ReactDOM.createRoot(document.getElementById('root')); 
root.render( 
   <> <React.StrictMode> 
      <App /> 
   </React.StrictMode> </> ); 
reportWebVitals()

  2. 0

    Root should also render an Outlet for nested routes to render their element content into.

    import React from 'react';
import {
  createBrowserRouter,
  createRoutesFromElements,
  RouterProvider,
  Route,
  Link,
  Navigate,
  Outlet, // <--
} from 'react-router-dom';
import Cart from './pages/Cart';
import Home from './pages/Home';
import ProductDetails from './pages/ProductDetails';

const Root = () => {
  return (
    <>
      <Link to="/">Home</Link>
      {/* other common UI, etc */}

      <Outlet />
    </>
  );
};

const appRouter = createBrowserRouter(
  createRoutesFromElements(
    <Route element={<Root />}>
      <Route path="home" element={<Home />} />
      <Route path="cart" element={<Cart />} />
      <Route path="product-details" element={<ProductDetails />} />
      <Route path="*" element={<Navigate to="/home" replace />} />
    </Route>
  )
);

function App() {
  return <RouterProvider router={appRouter} />;
}

export default App;

    For more complete details see:

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search