Basic example of React Router: BrowserRouter, Link, Route, and Switch

basic_router.jsx

// BrowserRouter is the router implementation for HTML5 browsers (vs Native).
// Link is your replacement for anchor tags.
// Route is the conditionally shown component based on matching a path to a URL.
// Switch returns only the first matching route rather than all matching routes.
import {
  BrowserRouter as Router,
  Link,
  Route,
  Switch,
} from 'react-router-dom';
import React from 'react';

const Home = () => <h1>Home</h1>;
const About = () => <h1>About</h1>;

// We give each route either a target `component`, or we can send functions in `render` or `children` 
// that return valid nodes. `children` always returns the given node whether there is a match or not.
const App = () => (
  <Router>
    <div>
      <Link to="/">Home</Link>{' '}
      <Link to={{pathname: '/about'}}>About</Link>{' '}
      <Link to="/contact">Contact</Link>
      
      <Switch>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route
          path="/contact"
          render={() => <h1>Contact Us</h1>} />
        <Route path="/blog" children={({match}) => (
          <li className={match ? 'active' : ''}>
            <Link to="/blog">Blog</Link>
          </li>)} />
        <Route render={() => <h1>Page not found</h1>} />
      </Switch>
    </div>
  </Router>
);

what if i want to use route.jsx as a separe file in which only <Route path="/" component={Home}/> type of tags are present and the <Link to>
will be present in other components. I tried doing that and it gave me error https://stackoverflow.com/questions/49709257/how-to-navigate-in-react-components-by-using-route-jsx-as-a-separate-route-compo

How can i do that?

even i am new to react and i facing the same issue please help me i am stuck ..:(

For [email protected], this did not work correctly for me until I changed

to have the 'exact' property

The switch only allows one match and I guess '/' is a subset match for '/about' and '/contact' so Home was always the only thing rendered.
btw, Thanks.. This was the example I needed

Very good callout and explanation of what you experienced; Cheers! 🍺

what if i want to use route.jsx as a separe file in which only type of tags are present and the
will be present in other components. I tried doing that and it gave me error https://stackoverflow.com/questions/49709257/how-to-navigate-in-react-components-by-using-route-jsx-as-a-separate-route-compo
How can i do that?

even i am new to react and i facing the same issue please help me i am stuck ..:(

I would check out this article:

https://stackoverflow.com/questions/42123261/programmatically-navigate-using-react-router-v4

FYI, this is a really old example and probably should not be used for the current version of React Router. Please see their documentation.

plz go to this link check my code tell me whats kind mistake my code and why show error me https://stackoverflow.com/q/58832778/10657996