We Keep Coding

I am using Router to display my header component (Checkout.js) but the content is not displaying after routing the path in react project

**App.js**
import './App.css';
import Header from "./Header.js";
import Home from "./Home.js";
import Checkout from "./Checkout.js";
import { BrowserRouter as Router, Route, Routes} from "react-router-dom";
function App() {
return (
<div className="App">
<Router>
<Header />
<Routes>
<Route path="/checkout" element={Header}/>
<Route exact path="/checkout" element={<Checkout />}/>
<Route exact path="/" element={<Home />}/>
<Route exact path="/" element={<Header />}/>
</Routes>
</Router>
</div>
);
}
export default App;
checkout.js
import React from 'react';
import "./Checkout.css";
import CheckoutProduct from "./CheckoutProduct.js";
import Subtotal from "./Subtotal.js";
function Checkout() {
return (
<div className="checkout">
<div className="checkout__left">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSlDIcv46GCe2DRvW-CmLDn5LHyORLkJo8isA&usqp=CAU" alt="" className="checkout__add" />
<div>
<h2 className="checkout__title">
your Shopping Basket
</h2>
<CheckoutProduct />
</div>
</div>
<div className="checkout__right">
<Subtotal />
</div>
</div>
)
}
export default Checkout
I am expecting after routing to checkout component it should display all the content written inside it. but I am only seeing blank screen.(I am following the same code structure from the Udemy video)

Routing not working with react-router-dom

I'm working on one of my friend's half-built React Project. I'm trying to route my react-app with react-router-dom. The components inside the <switch> are not working. Here's my
App.js
import React from 'react';
import Header from './components/Header';
import Main from './components/Main';
import Footer from './components/Footer';
import ProcessInput from './components/ProcessInput';
// Import react-router-dom
import { BrowserRouter as Router, Switch, Route} from 'react-router-dom';
function App() {
return(
<Router>
<div className="App">
<Header />
<Switch>
<Route path="/" exact component={Main} />
<Route path="/process" component={ProcessInput} />
</Switch>
<Footer />
</div>
</Router>
);
}
export default App;
Main.js
import React from 'react';
import Slider from './Slider';
import Card1 from './Card1';
import Card2 from './Card2';
import Prompt from './Prompt';
class Main extends React.Component {
render() {
return (
<div>
<main>
<Slider />
<Card1 />
<Card2 />
<Prompt />
</main>
</div>
)
}
}
export default Main;
The <Header /> and <Footer /> which are outside the <Switch> are showing anyways as intended. But, I want the Main component to be loaded as a root component (Launcher).
There are no errors on the console.
Please help me get to know what am I doing wrong. Thanks in advance :)

<Route path="/" exact>
<Main/>
</Route>
<Route path="/process"><ProcessInput/>
</Route>
This is the old way to do it. You can try this

In react Router i cant change the view but only the url is changing

Please tell me what's wrong in this when I am clicking on nav link the url is changing but the content is not changing
I am trying all the ways but can't figure out the problem, please have a look at this
App.js
import React, { Component } from 'react';
import './App.css';
import {
BrowserRouter as Router,
Switch,
Route
} from "react-router-dom";
import Home from './components/Home';
import About from './components/About';
import Nav from './components/Nav';
import Contact from './components/Contact';
class App extends Component {
render(){
return (
<React.Fragment>
<div id="page-wrapper">
<Router>
<Nav />
<Switch>
<Route path="/" exact component={Home} />
<Route path="/about" exact component={About} />
<Route path="/contact" exact component={Contact} />
<Route ><Default /></Route>
</Switch>
<Footer />
</Router>
</div>
</React.Fragment>
);
}
}
export default App;
My link file i.e nav bar
<Link to="/">
<li className="nav-item">HOME</li>
</Link>
<Link to="/about">
<li className="nav-item">About</li>
</Link>
Thanks in advance

Moving your BrowserRouter to index.js seems to work in my end.
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("root")
);
Then remove <Router> from your code.

<BrowserRouter> Does not remove hashbang from route

There is a #/ (hashbang) in my react route...
searching online yeilds covering <Route> with the new <BrowserRouter> will fix the problem
import React, { Component } from 'react';
import './App.scss';
import { observer } from 'mobx-react';
import { Header } from './components/Header'
import { Footer } from './components/Footer';
import { Route , BrowserRouter , Switch } from 'react-router-dom';
import MainState from './components/appset/MainState';
import HomePage from './components/HomePage';
import { TestContent } from './components/TestContent';
import { Account } from './components/Account';
import { TokenList } from './components/TokenList';
import { TokenPage } from './components/TokenPage';
import ErrorPage from './components/ErrorPage';
class Layout extends Component {
render() {
return (
<div id="bodyWheel" className={`App ${MainState.currentTheme} ${MainState.currentLang}`}>
<Header />
<div id="App-intro" className={this.state.resolutionHeight}>
<div className="container">
<div className="layout-main">
<BrowserRouter>
<Route path="/" exact component={HomePage} />
<Route path="/test" component={TestContent} />
<Route path="/account/:id" exact component={Account} />
<Route path="/token" exact component={TokenPage} />
<Route path="/token/:id" exact component={TokenList} />
<Route path="/operation/:id" exact component={HomePage}/>
<Route path="/error/:id" exact component={ErrorPage} />
</BrowserRouter>
</div>
</div>
</div>
<Footer />
</div>
);
}
}
export default Layout;
It adds #/ by itself at the end of every route for example:
www.foo.com/account/tera
becomes
www.foo.come/account/tera#/
<BrowserRouter> did nothing at all.
Will building and uploading to a webserver instead of running on 'npm start' fix the problem?
(edit:) turns out <BrowserRouter> works but something just keeps adding#/to the end of my routes the routs without#/` works just fine

fix is in the <BrowserRouter> edit to <BrowserRouter basename="">
and cover the main div
<BrowserRouter basename="">
<div id="bodyWheel" className={`App ${MainState.currentTheme} ${MainState.currentLang}`}>
....
</div>
</BrowserRouter>
fixed all the routing problems!

Page jumps using HashRouter in React

I'm using HashRouter in my application to prevent it from breaking when a page gets refreshed, or when a user tries to navigate to a specific route (ex: mysite.com/about)
How would I go about using page jumps in a tags? Something like this:
Contact Me
just navigates back to the start page with HashRouter. Is there any way to rewrite the link to have it jump down to the specific id?
index.js
...
import { HashRouter } from 'react-router-dom';
ReactDOM.render(
<HashRouter>
<App />
</HashRouter>, document.getElementById('root'));
registerServiceWorker();
App.js
import React, { Component } from 'react';
import { Switch, Route } from 'react-router-dom';
... //import for the components
class App extends Component {
render() {
return (
<div className="App">
<TopNav />
<div className="app-container">
<SideNav />
<div className="app-content">
<Switch>
<Route exact path='/' component={Home} />
<Route path='/about' component={About} />
<Route path='/projects' component={Projects} />
...
</Switch>
</div>
</div>
<BottomNav />
</div>
);
}
}
export default App;