Issue with react-router-dom and github pages

Question

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.

Igor Lebedisnky · Accepted Answer · 2020-10-10 23:26:16Z

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

Collectives™ on Stack Overflow

Issue with react-router-dom and github pages

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related