react : difference between <route exact path="/" /> and <route path="/" />

Because as soon as react finds a root that matches with the regex user* it will redirect you to that route that is /users But, if we went to http://app.com/users/create, it would again go through all of our defined routes and return the FIRST match it finds. React router does partial matching, so /users partially matches /users/create, so it would incorrectly return the Users route again! When true, will only match if the path matches the location.pathname exactly.

This is our Splunktool team suggestion ✌, we tried and its working fine

react - router contains all the common components between
react - router - dom and react - router - native.
When should you use one over the other ? 
   If you 're on the web then react-router-dom should have 
everything you need as it also exports the common components
you 'll need. 
If you 're using React Native, react-router-native should 
have everything you need
for the same reason.
So you 'll probably never have to import anything directly 
from react - router.

In this example, nothing really. The exact param comes into play when you have multiple paths that have similar names:

For example, imagine we had a Users component that displayed a list of users. We also have a CreateUser component that is used to create users. The url for CreateUsers should be nested under Users. So our setup could look something like this:

<Switch>
  <Route path="/users" component={Users} />
  <Route path="/users/create" component={CreateUser} />
</Switch>

The exact param disables the partial matching for a route and makes sure that it only returns the route if the path is an EXACT match to the current url.

So in this case, we should add exact to our Users route so that it will only match on /users:

<Switch>
  <Route exact path="/users" component={Users} />
  <Route path="/users/create" component={CreateUser} />
</Switch>

Suggestion : 2

When we have two or more links within a component and use route path, the page will render the items on both links if we only want to render the second link. But when we use the route exact path, the page only renders the details in the second link. When we create two or more links within a component, things become tricky, and we need to improvise. We add the exact path to both components and see that when we go to the "About", it renders only the "about" page.

Then we will put some codes inside our App.js file like below.

Code Snippet - App.js:

import React, { Component } from 'react';
import './App.css';
import { BrowserRouter as Router } from 'react-router-dom';
import Route from 'react-router-dom/Route';

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <Route path="/" render={
            () => {
              return (<h1>Welcome Home</h1>);
            }
          } />
          <Route path="/about" render={
            () => {
              return (<h1>About</h1>);
            }
          } />

        </div>
      </Router>
    );
  }
}

export default App;

2._

import React, { Component } from 'react';
import './App.css';
import { BrowserRouter as Router } from 'react-router-dom';
import Route from 'react-router-dom/Route';

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <Route exact path="/" render={
            () => {
              return (<h1>Welcome Home</h1>);
            }
          } />
          <Route exact path="/about" render={
            () => {
              return (<h1>About</h1>);
            }
          } />

        </div>
      </Router>
    );
  }
}

export default App;

Suggestion : 3

The path prop specifies on what path of our app a given route is located. The primary difference between them lies in their usage. React Router DOM is for web applications and React Router Native is for mobile applications made with React Native. We're now matching the appropriate component or whatever the slug is. But within our BlogPost component, how do we receive that post slug data? Whenever we're using something like a private route and we have a condition in which the user is not authenticated, we want to redirect them back to the login page.

The first thing that you'll need to do is install React Router DOM using npm (or yarn):

npm install react - router - dom

Note that there are multiple types of routers that react-router-dom provides aside from BrowserRouter which we won't go into. It's a common practice to alias (rename) BrowserRoute as simply 'Router' when it is imported.

If we want to provide routes within our entire application it needs to be wrapped around our entire component tree. That's why you will usually see it wrapped around or within the main app component:

import { BrowserRouter as Router } from 'react-router-dom';

export default function App() {
  return (
    <Router>
      {/* routes go here, as children */}
    </Router>
  );
}

The next component is the Route component.

We declare routes within the Router component as children. We can declare as many routes as we like and we need to provide at least two props to each route, path and component (or render):

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

export default function App() {
  return (
    <Router>
      <Route path="/about" component={About} />
    </Router>
  );
}

function About() {
  return <>about</>   
}

It's worth noting that you can potentially drop the render or component prop entirely and use the component that you want to associate with a given route as a child of Route:

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

export default function App() {
  return (
    <Router>
      <Route path="/about">
        <About />
      </Route>
    </Router>
  );
}

Finally, if want a component (such as a navbar) to be visible on every page, put it still within the browser router, but above (or below) the declared routes:

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

export default function App() {
  return (
    <Router>
      <Navbar />
      <Route path="/" component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
}

function Navbar() {
  // visible on every page
  return <>navbar</>
}

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

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

Suggestion : 4

When I was using react router for the first time I used path instead of exact path as props in component. In the above code when one replaces exact path to path it will match every path starting with '/', since the is inside the so, it will match the first path and don't check for the other matches. The above code after removing exact from the will always show component and ignore or . If one doesn't want to use exact path then the below code will work Built on Forem — the open source software that powers DEV and other inclusive communities.

1._

<Router>
   <Switch>
      <Route exact path="/">
         <Home />
      </Route>
      <Route path="/about">
         <About />
      </Route>
      <Route path="/dashboard">
         <Dashboard />
      </Route>
   </Switch>
   </div>
</Router>

2._

<Router>
   <Switch>
      <Route path="/about">
         <About />
      </Route>
      <Route path="/dashboard">
         <Dashboard />
      </Route>
      <Route path="/">
         <Home />
      </Route>
   </Switch>
   </div>
</Router>

Suggestion : 5

1.exact: It is used to match the exact value with the URL. For Eg., exact path=’/about’ will only render the component if it exactly matches the path but if we remove exact from the syntax, then UI will still be rendered even if the structure is like /about/10. Route: Route is the conditionally shown component that renders some UI when its path matches the current URL. 3. element: It refers to the component which will render on matching the path.

To add React Router components in your application, open your project directory in the editor you use and go to app.js file. Now, add the below given code in app.js.

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

2._

import React from 'react';
  
function Home (){
    return <h1>Welcome to the world of Pretagcode!</h1>
}
  
export default Home;

3._

import React from 'react';
  
function About () {
    return <div>
        <h2>Pretagcode is a computer science portal for geeks!</h2>
  
        Read more about us at : 
        <a href="https://www.geeksforgeeks.org/about/">
            https://www.geeksforgeeks.org/about/
        </a>
    </div>
}
export default About;

5._

class App extends Component {
  render() {
    return (
       <Router>
           <div className="App">
           </div>
       </Router>
   );
  }
}

6._

<div className="App">
       <ul>
            <li>
                 
         <Link to="/">Home</Link>
               
      </li>
            <li>
                 
         <Link to="/about">About Us</Link>
               
      </li>
            <li>
                 
         <Link to="/contact">Contact Us</Link>
               
      </li>
          </ul>
</div>

Suggestion : 6

Then you have to put exact keyword to the Route which it's path is also included by another Route's path. For example home path / is included in all paths so it needs to have exact keyword to differentiate it from other paths which start with /. The reason is also similar to /functions path. If you want to use another route path like /functions-detail or /functions/open-door which includes /functions in it then you need to use exact for the /functions route. Fix GitLab error: "you are not allowed to push code to protected branches on this project"? The exact param disables the partial matching for a route and makes sure that it only returns the route if the path is an EXACT match to the current url.

Can someone explain the difference between

<Route exact path="/" component={Home} />

and

<Route path="/" component={Home} />

In this example, nothing really. The exact param comes into play when you have multiple paths that have similar names:

<Switch>
  <Route path="/users" component={Users} />
  <Route path="/users/create" component={CreateUser} />
</Switch>

In short, if you have multiple routes defined for your app's routing, enclosed with Switch component like this;

<Switch>

  <Route exact path="/" component={Home} />
  <Route path="/detail" component={Detail} />

  <Route exact path="/functions" component={Functions} />
  <Route path="/functions/:functionName" component={FunctionDetails} />

</Switch>

Suggestion : 7

This <Route path="*" component={Home} /> handles nonexistent routes in a special way. The asterisk at the path prop causes the route to be called when a nonexistent path is hit. It then displays the Home component. You can add another route for this case, but instead of creating another component to just display a message, we can use the render property of the <Route> component: This method redirects the URL to / when a nonexistent path is hit in our application and sets the route / and Home as our default page.

React is a popular library for building SPAs. However, as React focuses only on building user interfaces, it doesn’t have a built-in solution for routing.

React Router is the most popular routing library for React. It allows you define routes in the same declarative style:

<Route path="/home" component={Home} />

But let’s not get ahead of ourselves. Let’s start by creating a sample project and setting up React Router.

I’m going to use Create React App to create a React app. You can install (or update) it with:

npm install - g create - react - app

You just need to have Node.js version 6 or superior installed.

Next, execute the following command:

create - react - app react - router - example

At this point, you can execute:

npm start

If you’re going to target older browsers that don’t support the HTML5 History API, you should stick with <HashRouter>, which creates URLs with the following format:

http: //localhost:3000/#/route/subroute