Breaking News: Grepper is joining You.com. Read the official announcement!

how to create route in react.js

Add Answer

Prickly Pony answered on February 3, 2023 Popularity 10/10 Helpfulness 4/10

answer how to create route in react.js

related React router setup in react app

related React app setup using react router

how to create route in react.js

Comment

add this to the router.jsx file
import React from 'react';
import { createBrowserRouter } from 'react-router-dom';
import HomePage from './Views/Guest';
import NotFound from './Views/NotFound';

// router.jsx file is the base section where all routes is been created*******
const CreateRouter = createBrowserRouter([
  {
    path: "/home",
    element: <HomePage />
  },
  {
    path: "*",
    element: <NotFound />
  },
]);
export default CreateRouter;
2nd add this to the main.jsx or index.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { RouterProvider } from 'react-router-dom';
import CreateRouter from './Router';
ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    { <RouterProvider router={CreateRouter} /> /* import and set the router file so as to activated the routing*** */}
  </React.StrictMode>,
)
3rd for sepration of concern
create a layout import and create a path for the layout on the router 
file than add a childern[
] this will contanin all the path you need to belong to that layout 
also add and <outlet/> to your various layout so as to be able to 
render those route.
e.g
import React from 'react';
import { createBrowserRouter } from 'react-router-dom';
import HomePage from './Views/Index';
import NotFound from './Views/NotFound';
import GuestLayout from './Layout/GuestLayout';
// router.jsx file is the base section where all routes is been created*******
const CreateRouter = createBrowserRouter([
  {
    path: "/",
    element: <GuestLayout />,
    children: [

      {
        path: "home",
        element: <HomePage />
      },
    ]
  },
  
  {
    path: "*",
    element: <NotFound />
  },
]);
export default CreateRouter;
layout component looks like this
import React from 'react'
import { Outlet } from 'react-router-dom';

const GuestLayout = () => {
  return (
    <div>
        guest page
      <Outlet/>
    </div>
  )
}
export default GuestLayout;

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: javascript

Link to this answer
Share Copy Link

Contributed on Feb 03 2023

Prickly Pony

0 Answers Avg Quality 2/10

Closely Related Answers

React router setup in react app

Comment

import React from "react";
import ReactDOM from "react-dom/client";
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";
import "./index.css";

const router = createBrowserRouter([
  {
    path: "/",
    element: <div>Hello world!</div>,
  },
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

Popularity 9/10 Helpfulness 4/10 Language javascript

Source: reactrouter.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on May 14 2023

Aziz

0 Answers Avg Quality 2/10

React app setup using react router

Comment

npm create vite@latest name-of-your-project -- --template react
# follow prompts
cd <your new project directory>
npm install react-router-dom localforage match-sorter sort-by
npm run dev

Popularity 8/10 Helpfulness 2/10 Language javascript

Source: reactrouter.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on May 14 2023

Aziz

0 Answers Avg Quality 2/10

how to create route in react.js

Contents

More Related Answers

how to create route in react.js

Closely Related Answers

React router setup in react app

React app setup using react router

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.