CODEWITHSUNDEEP
javascriptreactjs
Matt Fuller
Matt Fuller

Reputation: 125

Issue with react-router-dom and github pages

So, first I had an issue with the routes not working, but I resolved that with react-router-dom's "baseline" property, but now despite the home page loading, the subsequent links render beneath the first component, which is supposed to dissapear entirely when the link is clicked.

It works fine locally.

This is my app.js

import React from 'react';
import './App.css';
import Navbar from './Component/Navbar/Navbar';
import RecipeList from './Component/RecipeList/RecipeList';
import { Switch, Route, BrowserRouter } from 'react-router-dom'
import RecipeItemDetails from './Component/RecipeItemDetails/RecipeItemDetails';

function App() {
  return (
    <BrowserRouter basename={process.env.PUBLIC_URL}>
    <div className="App">
      <Navbar/>
      <Route exact path="/" component={RecipeList} />
      <Route path="/recipes/:id" component={RecipeItemDetails} />
    </div>
    </BrowserRouter>
  );
}

export default App;

any ideas? I've tried adding "exact" to the second route which didnt work, and I've also tried wrapping the router in a "switch", but that doesnt work either. I'm stumped.

Upvotes: 0

Views: 513

Answers (1)

Igor Lebedisnky
Igor Lebedisnky

Reputation: 66

your routes are inside el. so the the re rendered part when the route change is the Route components , and the div and navbar not re-rendered this is the reason you see the new routes beneath the first component, you should do something like this

  <BrowserRouter basename={process.env.PUBLIC_URL}>
  <Route exact path="/" component={RecipeList} />
  <Route path="/recipes/:id" component={RecipeItemDetails} />
  </BrowserRouter>

and then in the RecipeList and RecipeItemDetails import the Navbar and enclose it in the desired

Upvotes: 1

Related Questions