How can I create a browser router in ReactJS?

Question

I'm finding it difficult to create a Browser Route in React. Here is what I want to do:

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Navbar from './components/navbar/Navbar';
import RecipeList from './containers/recipe-list/RecipeList';
import Recipe from './containers/recipe-details/RecipeDetails';
import Footer from './components/footer/Footer';
import Error from './components/error/Error';
import './App.css';

export default function App() {
  return (
    <div>
      <Navbar />
      <BrowserRouter>
        <Switch>
          <Route exact path="/" component={RecipeList} />
          <Route path="./containers/recipe-details/RecipeDetails" component={Recipe} />
          <Route component={Error} />
        </Switch>
      </BrowserRouter>
      <Footer />
    </div>
  );
}


import React from 'react';
import { Link } from 'react-router-dom';

export default function Recipe() {
  return (
    <div>
      <Link to="../../containers/recipe-details/RecipeDetails">Recipe</Link>
    </div>
  );
}

The problem comes in my Recipe component which I want to create a separate route for. Thanks in anticipation of your response.

Shubham Khatri · Accepted Answer · 2021-04-14 18:14:30Z

1

The path to the Route is the link in the browser that will show up that component and not the path to the component in your directory structure, you can set up your Route and Link like below

export default function App() {
  return (
    <div>
      <Navbar />
      <BrowserRouter>
        <Switch>
          <Route exact path="/" component={RecipeList} />
          <Route path="/recipe" component={Recipe} />
          <Route component={Error} />
        </Switch>
      </BrowserRouter>
      <Footer />
    </div>
  );
}

import React from 'react';
import { Link } from 'react-router-dom';

export default function Recipe() {
  return (
    <div>
      <Link to="/recipe">Recipe</Link>
    </div>
  );
}

answered Apr 14, 2021 at 18:14

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Sunday Ezeilo Over a year ago

Thumbs up, bro! You got it. Though I had to move the <BrowserRoute> to wrap everything in the return statement in the App component. If not I got this Error: Invariant failed: You should not use <Link> outside a <Router>. Can you suggest why?

Sunday Ezeilo Over a year ago

Additionally, my RecipeDetails will have a dynamic parameter such as id. So how can I cater for this in the route? Thanks for your reply.

Shubham Khatri Over a year ago

@SundayEzeilo you can use params with Routes like <Route path="/recipe/:id" component={Recipe} /> and the link will then be <Link to="/recipe/1">Recipe</Link> or similar

Sunday Ezeilo Over a year ago

Awesome! Thanks, all, for your quick and positive replies. Happy coding!

Shubham Khatri Over a year ago

Glad to have helped

Mainly Karma · Accepted Answer · 2021-04-14 18:18:52Z

1

Your Route path will match what you'd like your url to look like

<Route exact path="/" component={RecipeList} /> will open your RecipeList component with this website: www.yourwebsite.com/
<Route path="/recipe" component={Recipe} /> will open your Recipe component with this website: www.yourwebsite.com/recipe

I don't know exactly how you'd like it, but I'd imagine you want a more simple path like:

<Switch>
     <Route exact path="/" component={RecipeList} />
     <Route path="/RecipeDetails" component={Recipe} />
     <Route component={Error} />
</Switch>

and accessing your route through a link is as simple as:

<Link to="/RecipeDetails">Recipe</Link>

answered Apr 14, 2021 at 18:18

Mainly Karma

4773 silver badges13 bronze badges

3 Comments

Sunday Ezeilo Over a year ago

Thanks, bro. Additionally, my RecipeDetails will have a dynamic parameter such as id. So how can I cater for this in the route? Thanks for your reply.

Mainly Karma Over a year ago

<Route path="/RecipeDetails/:id" component={Recipe} /> and to use it, import { Link, useParams } from 'react-router-dom' and to get the value back let { id } = useParams();

Mainly Karma Over a year ago

this documentation might help you out in your next steps reactrouter.com/web/api/Hooks

Collectives™ on Stack Overflow

How can I create a browser router in ReactJS?

2 Answers 2

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related