react routing

Comment

0

// installing dependency
yarn add react-router-dom

// implementation
import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: javascript react-routing

Share

Link to this answer
Share Copy Link

Contributed on Aug 29 2022

Scriper

0 Answers Avg Quality 2/10

react routing

Comment

59

//First install react router
npm install react-router-dom

//Import it from your react index.js file
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

//Rap your app with BrowserRouter
<BrowserRouter>
	<App />  
</BrowserRouter>

//Define you Routes in your app and import it on the top
<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/create" element={<Create />} />
  <Route path="/blogs/:id" element={<BlogDetails />} />
  <Route path="*" element={<NotFound />} />
</Routes>

//Now you are all set. You can use this with
<Link to="/create" element={Create}/>

Popularity 10/10 Helpfulness 6/10 Language javascript

Source: Grepper

Tags: javascript j

Share

Link to this answer
Share Copy Link

Contributed on Sep 28 2022

Fortune Mbulazi

0 Answers Avg Quality 2/10

react router

Comment

1

// [1] terminal
npm install react-router-dom

// [2] index.js
import React from "react";
import ReactDOM from "react-dom/client";
import { RouterProvider, createBrowserRouter } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import Contact from "./pages/Contact";
import NotFound from "./pages/NotFound";

// you can also create this router constant in another file and import it here
const Router = createBrowserRouter([
  {
    path: "/",
    element: <Home />,
    errorElement: <NotFound />,
  },
  {
    path: "/about",
    element: <About />,
  },
  {
    path: "/contact",
    element: <Contact />,
  }
]);

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

Popularity 9/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: javascript j

Share

Link to this answer
Share Copy Link

Contributed on Jun 27 2024

Noah

0 Answers Avg Quality 2/10

react router

Comments(1)

14

//React Router 6
import Home from './Home';
import Navbar from './Navbar';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Create from './Create';
import BlogDetails from './BlogDetails';
import NotFound from './NotFound';
function App() {
  return (
    <Router>
      <div className="App">
        <Navbar />
        <div className="content">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/create" element={<Create />} />
            <Route path="/blogs/:id" element={<BlogDetails />} />
            <Route path="*" element={<NotFound />} />
          </Routes>
        </div>
      </div>
    </Router>
  );
}

export default App;

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: javascript j

Share

Link to this answer
Share Copy Link

Contributed on Jan 17 2022

Ofir Salem

0 Answers Avg Quality 2/10

routes react

Comment

7

npm install --save react-router-dom

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: medium.com

Tags: javascript j

Share

Link to this answer
Share Copy Link

Contributed on Jul 20 2020

Philan ISithembiso

0 Answers Avg Quality 2/10

react router

Comment

3

// APP.js Setup.........
import * as React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import "./App.css";
import Home from "./Component/Home/Home";

function App() {
  return (
    <div className="App">
      <BrowserRouter>
       <Routes>
          <Route path="/" element={<Home />} />
       </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;


// index.js setup
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";
import reportWebVitals from "./reportWebVitals";

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

reportWebVitals();

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: javascript j

Share

Link to this answer
Share Copy Link

Contributed on Apr 12 2022

Shamim

0 Answers Avg Quality 2/10

react router

Comment

1

    import React from 'react';  
    import ReactDOM from 'react-dom';  
    import { Route, Link, BrowserRouter as Router } from 'react-router-dom'  
    import './index.css';  
    import App from './App';  
    import About from './about'  
    import Contact from './contact'  
      
    const routing = (  
      <Router>  
        <div>  
          <h1>React Router Example</h1>  
          <Route exact path="/" component={App} />  
          <Route path="/about" component={About} />  
          <Route path="/contact" component={Contact} />  
        </div>  
      </Router>  
    )  
    ReactDOM.render(routing, document.getElementById('root'));

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: javascript j

Share

Link to this answer
Share Copy Link

Contributed on Oct 20 2021

Motionless Mosquito

0 Answers Avg Quality 2/10

react router

Comment

4

import "./App.css";
import SignIn from "./SignIn";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import PrimarySearchAppBar from "./Header";
import SignUp from "./SignUp";
function App() {
  return (
    <Router>
      <PrimarySearchAppBar />
      <Routes>
        {["/", "/home"].map((path) => (
          <Route exact path={path} element={<Home />} />
        ))}
        <Route path="/signin" exact element={<SignIn />} />
        <Route path="/signup" exact element={<SignUp />} />
        <Route exact path="*" element={<ComingSoon />} />
      </Routes>
    </Router>
  );
}

export default App;

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: javascript j

Share

Link to this answer
Share Copy Link

Contributed on Feb 16 2022

Blue Baboon

0 Answers Avg Quality 2/10

react router

Comment

1

To use React Router in your React application, you first need to install it as a dependency using npm:

npm install react-router-dom

Once you have installed React Router, you can start using it in your application. Here's an example of how to define routes in your application using React Router:

import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

function App() {
  return (
    <Router>
      <div>
        <Switch>
          <Route exact path="/">
            <HomePage />
          </Route>
          <Route path="/about">
            <AboutPage />
          </Route>
          <Route path="/contact">
            <ContactPage />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

Inside each Route component, you can define a component that will be rendered when the route is matched. For example, you might define a HomePage component like this:
function HomePage() {
  return <h1>Welcome to the home page!</h1>;
}

To navigate between routes in your application, you can use the Link component from React Router:
import { Link } from "react-router-dom";

function Navbar() {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/contact">Contact</Link>
        </li>
      </ul>
    </nav>
  );
}

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: javascript j

Share

Link to this answer
Share Copy Link

Contributed on Mar 07 2023

SubZero

0 Answers Avg Quality 2/10

react router

Comment

2

//Install react router

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 10/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: javascript j

Share

Link to this answer
Share Copy Link

Contributed on May 08 2023

Nishad Islam

0 Answers Avg Quality 2/10

react router

Comments(1)

2

react router

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

  return (
    <>
      <Router>
        <>
          <Routes>
            <>
              <Route
                exact
                path="/"
                element={
                  <>
                    <Dashboard allFaq={allFaq} />
                  </>
                }
              />
              <Route
                exact
                path="/login"
                element={
                  <>
                    <Login />
                  </>
                }
              />
            </>
          </Routes>
        </>
      </Router>
    </>
  );

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: javascript j

Share

Link to this answer
Share Copy Link

Contributed on Mar 01 2022

Abhishek

0 Answers Avg Quality 2/10

react routing

Contents

More Related Answers

react routing

Closely Related Answers

react routing

react router

react router

routes react

react router

react router

react router

react router

react router

react router

Grepper

Documentation

Social

Legal

Contact

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