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

useRoutes

Coffee Addict answered on January 17, 2022 Popularity 7/10 Helpfulness 4/10

answer useRoutes

related useroutes how to use

useRoutes

Comment

// React Router v6:
// hook functionally equivalent to <Routes>, but uses JS objects instead
// of <Route>, use this hook instead of 'react-router-config' (React Router v5)
import { useRoutes } from 'react-router-dom';

function App() {
  let element = useRoutes([
    {
      path: '/',
      element: <Dash />,
      children: [
        { path: 'messages', element: <DashMessages /> },
        { path: 'tasks', element: <DashTasks /> }
      ]
    },
    { path: 'team', element: <About /> }
  ]);

  return element;
}

Popularity 7/10 Helpfulness 4/10 Language javascript

Source: reactrouter.com

Tags: javascript

Link to this answer
Share Copy Link

Contributed on Jan 17 2022

Coffee Addict

0 Answers Avg Quality 2/10

Closely Related Answers

useroutes how to use

Comment

//routes.js

import { useRoutes } from "react-router-dom";
import Home from './pages/Home'
import About from './pages/About'
import Login from './pages/Login'
import SignUp from './pages/Signup'
import AuthLayout from './layouts/AuthLayout'
import MainLayout from './layouts/MainLayout'

export default function Router() {
  let element = useRoutes([
      {
          element: <AuthLayout />,
          children: [
             { path: "/", element: <Login /> },
             { path: "signup", element: <SignUp /> },
          ],
      },
      {
          element: <MainLayout />,
          children: [
              { path: "home", element: <Home /> },
              { path: "about", element: <About /> },
          ],
      },
  ]);
  return element;
}

//App.js

import "./styles.css";
import { BrowserRouter } from "react-router-dom";
import Router from './routes'

export default function App() {
  return (
      <BrowserRouter>
          <div className="App">
              <h1>useRoutes Example</h1>
              <Router/>
          </div>
      </BrowserRouter>
  );
}

//link to full example
//https://codesandbox.io/s/thirsty-architecture-jgok5?file=/src/App.js

Popularity 8/10 Helpfulness 5/10 Language javascript

Source: dev.to

Tags: javascript

Link to this answer
Share Copy Link

Contributed on Feb 04 2022

Encouraging NeoBliz

0 Answers Avg Quality 2/10

useRoutes

Contents

More Related Answers

useRoutes

Closely Related Answers

useroutes how to use

Grepper

Documentation

Social

Legal

Contact

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