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>
);

For [email protected], this did not work correctly for me until I changed
<Route path="/" component={Home} />
to have the 'exact' property
<Route exact path="/" component={Home} />

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

@brianbooth thanks, very helpful.

Thanks. Very easy to implement

Cool, any ideas on how to test this? I managed to implement a working router, but hours of fruitless pain trying to implement proper testing.

Hello, I encountered a problem, I wanted separate the route part into another component called Routes.jxs , and import the component into basic_router.jsx in order to manager the route separately. like showed belowd. But I had a error like showed in the screenshoot. Do you know why? Thank you

<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>

  <Router>
    <div>
      <Link to="/">Home</Link>{' '}
      <Link to={{pathname: '/about'}}>About</Link>{' '}
      <Link to="/contact">Contact</Link>
      <Routes />
    </div>
  </Router>

ERROR:

@MeganGong try to use Routes as a variable object instead of component.

Example:

import { Routes } from 'Routes.js';
.
.
.
<Router>
    <div>
      <Link to="/">Home</Link>{' '}
      <Link to={{pathname: '/about'}}>About</Link>{' '}
      <Link to="/contact">Contact</Link>
       {Routes}
    </div>
  </Router>

and your Routes.js file will have something like this-

export const Routes = (
  <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>
);

Thanks, very helpfull

@lovingyugs Thanks ! try to use Routes as a variable object instead of component was what I needed

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?

Can I use something else other than <Link /> to direct user to another place in the app, say I have a button that I want to navigate back to where I was starting but don't want to add <Link /> since it looks like an anchor element.

Is there away to route into another page inside the code, like ?

  updateStore(loggedIn){
    const action = {type:loggedIn};
    store.dispatch(action);
    if(loggedIn==='LOGGED_IN'){
       console.log("I am In");
      //rout me int another page
    }else{
      console.log("I am out");
    }
  }

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