We Keep Coding

React Router Dom, show Header component only for some pages [duplicate]

This question already has answers here:
How do I render components with different layouts/elements using react-router-dom v6
(2 answers)
Closed 8 months ago.
Header will appear in all components except ConfirmEmail. Basically I don't want the Header to appear when the ConfirmEmail component is opened. What should I do?
Router setup:
import React from 'react';
import {BrowserRouter,Routes ,Route} from 'react-router-dom'
import Header from "../Components/Header";
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
import Home from '../Components/Home';
import Contact from '../Components/Contact';
import Login from '../Components/Login';
import Register from '../Components/Register';
import ConfirmEmail from '../Components/SuccessEmailApproved';
const App = () =>{
return(
<BrowserRouter>
<Header/>// If confirmEmail component is opened, hide it here
<Routes>
<Route path="/" element={<Home/>} />
<Route path="/home" element={<Home/>} />
<Route path="/ev" element={<Home/>} />
<Route path="/contact" element={<Contact/>} />
<Route path="/iletisim" element={<Contact/>} />
<Route path="/login" element={<Login/>} />
<Route path="/giris" element={<Login/>} />
<Route path="/register" element={<Register/>} />
<Route path="/kayit" element={<Register/>} />
<Route path="/ConfirmEmail" element={<ConfirmEmail />} /> //I don't want the header component to appear if this is opened. but it will appear in other components.
</Routes>
</BrowserRouter>
);
}
export default App;
Update:
Tried the below solution and it's working, but is there a better way?
{window.location.pathname !== "/ConfirmEmail" ?<Header/>:<></>}

You could create a Layout.js component like below. It's kind of the common way to set up the same structure for multiple pages in React Router Dom v6.
import { Outlet } from "react-router-dom";
import Header from "../Header"; // ⚠️ verify it's the correct path
const Layout = () => {
return (
<>
<Header />
<Outlet />
</>
);
};
export default Layout;
And change App as below. Notice ConfirmEmail page is left out from the pages where you want Header:
// ⚠️ previous imports
import Layout from "./components/Layout"; // ⚠️ verify it's the correct path
const App = () =>{
return(
<BrowserRouter>
<Routes>
<Route element={<Layout />}>
<Route path="/" element={<Home/>} />
<Route path="/home" element={<Home/>} />
<Route path="/ev" element={<Home/>} />
<Route path="/contact" element={<Contact/>} />
<Route path="/iletisim" element={<Contact/>} />
<Route path="/login" element={<Login/>} />
<Route path="/giris" element={<Login/>} />
<Route path="/register" element={<Register/>} />
<Route path="/kayit" element={<Register/>} />
</Route>
<Route path="/ConfirmEmail" element={<ConfirmEmail />} />
</Routes>
</BrowserRouter>
);
}
export default App;
You can have as many layouts as you want (MainLayout, AuthLayout, Layout...). The setup is the same, an Outlet and a Route that has your Layout as element and wraps the pages for that Layout.

Why doesn't the new 'Routes' syntax in React-router-dom work on my code?

I learnt that after the newly released react packages, the tag in react-router-dom do not work again so I changed to "Routes" after a couple of research online but still, it isn't working. Below is a screenshot from my PC.
Also this is the code
import React from 'react';
import Navbar from './components/Navbar'
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';
import './App.css';
import Home from './components/pages/Home';
import Services from './components/pages/Services';
import Products from './components/pages/Products';
import SignUp from './components/pages/SignUp';
function App(){
return (
<>
<Router>
<Navbar />
<Routes>
<Route exact path="/" component={Home} />
<Route path="/services" component={Services} />
<Route path="/products" component={Products} />
<Route path="/sign-up" component={SignUp} />
</Routes>
</Router>
</>
);
}
export default App;
//<HeroSection />
//import HeroSection from './components/HeroSection';

On new version of react-router-dom this should work. Check it.
<Routes>
<Route path="/" element={<Home />} />
<Route path="/services" element={<Services />} />
<Route path="/products" element={<Products />} />
<Route path="/sign-up" element={<SignUp />} />
</Routes>
Paste your error please. There would another issue

Router, Rout and Switch not working in my React website?

I am trying to create a website with React, but my code is not working and i dont understand why..
I have this code in index.js, because I want my header to always be there.
const element = <h1>Header</h1>; ReactDOM.render(element, document.getElementById('root'));
I have created a few components, and I have this code in my App.js
import React, {Component} from 'react';
import {BrowserRouter as Router, Route, Switch, Link, BrowserRouter} from 'react-router-dom';
import {Home} from './Components/Home';
import {About} from './Components/About';
import {Contact} from './Components/Contact';
import {Resume} from './Components/Resume';
import {Photos} from './Components/Photos';
import {NoMatch} from './Components/NoMatch';
class App extends Component {
render(){
return(
<React.Fragment> <Router> <switch>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
<Route path="/resume" component={Resume} />
<Route path="/photos" component={Photos} />
<Route component={NoMatch} />
</switch>
</Router>
</React.Fragment>
);
}
}
And all my components looks like this now, just temporarly:
import React from 'react'
export const About = () => (
<div>
<h2>About</h2>
</div>
)
The problem is that i only see "Header" on all pages, and when i change the path to localhost../About, it does not show anything else but "Header".
Why is not my code working and the code in my components showing in the different paths?
I've used the npm create-react-app and uses visualstudiocode. Thank you for the help, much appreciated :)
Btw, im following a tutorial and it is working for him but not me for some reason...

The Switch needs to be with a capital letter 'S'
<Router>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
<Route path="/resume" component={Resume} />
<Route path="/photos" component={Photos} />
<Route component={NoMatch} />
</Switch>
</Router>

Shouldn’t ‘switch’ be with a capital letter ( Switch )?

Is <switch> with lower case on purpose? It should be <Switch>
Anyway, I would like to see your code in a code sandbox if it's not the problem

React Refuses to render a div

I am working on a web application and my application works for the most part except I cannot see the /tasks section. I do not understand because it is the same as the rest of my elements.
import React, {
Component,
Fragment
} from 'react';
import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom';
import AppProvider, {
Consumer
} from './AppProvider';
import Login from './Login';
import Signup from './Signup';
import Navbar from './Navbar';
import FlashMessage from './FlashMessage';
class App extends Component {
render() {
return (
<AppProvider>
<Router>
<Fragment>
<Navbar />
<FlashMessage />
<Route exact path="/" component={() =>
<h1 className="content">Welcome, Home!</h1>} />
<Route exact path="/login" component={() => <Login />} />
<Route exact path="/signup" component={() => <Signup />} />
<Router exact path="/tasks" component={() =>
<h1 className="content">Content Should Go Here</h1>} />
<Route exact path="/signedOut" component={() =>
<h1 className="content">You're now signed out.</h1>} />
<Route exact path="/accountCreated" component={() =>
<h1 className="content">Account created. <Link
to="/login">
Proceed to Dashboard</Link></h1>} />
</Fragment>
</Router>
</AppProvider>
);
}
}
export default App;
The content div routed at /tasks won't display anything. There are no errors, I have checked in the console. All I want is it to display the content on /tasks.

I think the problem is you are using the BrowserRouter in your "./tasks" instead of use route.

The issue is because you have a trailing Slash on your link.

404 page in REACT

I created the component NotFound and it works fine when I go to a page that doesn't exist. But the same page it's appearing in all my pages, not only the one that doesn't exist. This is the component:
import React from 'react'
const NotFound = () =>
<div>
<h3>404 page not found</h3>
<p>We are sorry but the page you are looking for does not exist.</p>
</div>
export default NotFound
And this is how I used it in the main page:
class MainSite extends Component {
render () {
return (
<div>
{/* Render nav */}
<Route path='/dashboard' component={Nav} />
<Route path='/retrospectives' component={Nav} />
<Route path='/users' component={Nav} />
<Route path='/projects' component={Nav} />
{/* Dashboard page */}
<ProtectedRoute exact path='/dashboard' component={DashboardPage} />
{/* Retrospectives page */}
<ProtectedRoute exact path='/retrospectives' component={RetrospectivesPage} />
{/* Users page */}
<ProtectedRoute exact path='/users' component={UsersPage} />
{/* Projects page */}
<ProtectedRoute exact path='/projects' component={ProjectsPage} />
{/* Retrospective related pages */}
<Route exact path='/retrospectives/:retrospectiveId' component={Retrospective} />
<Route exact path='/join-retrospective' component={JoinRetrospective} />
<ProtectedRoute exact path='/create-retrospective/:retrospectiveId' component={Retrospective} />
{/* OnBoarding pages */}
<ProtectedRoute exact path='/beta-code' component={BetaCodeAccess} />
<Route exact path='/auth-handler' component={AuthHandler} />
<Route exact path='/join-organization' component={JoinOrganization} />
</div>
)
}
}
export default MainSite
As you can see I use <Route path="*" component={NotFound} /> to create the 404 pages, but that component is appearing in every existing page as well. How can I fix this?

Try this one:
import { Switch, Route } from 'react-router-dom';
<Switch>
<Route path='/dashboard' component={Nav} />
<Route path='/retrospectives' component={Nav} />
<Route path='/users' component={Nav} />
<Route path='/projects' component={Nav} />
<Route path="" component={NotFound} />
</Switch>

All below example works fine:
<Route path="" component={NotFound} /> // empty ""
<Route path="*" component={NotFound} /> // star *
<Route component={NotFound} /> // without path
Or if you want to return a simple 404 message without any component:
<Route component={() => (<div>404 Not found </div>)} />

For those who are looking for an answer using react-router-dom v6, many things had changed. Switch for example doesn't exists anymore, you have to use element instead of component, ... Check this little example to get you an idea:
import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import './index.css'
import App from './App'
const Test = () => (
<h1>404</h1>
)
ReactDOM.render(
<React.StrictMode>
<Router>
<Routes>
<Route path='/' element={<App />} />
<Route path='*' element={<Test />}/>
</Routes>
</Router>
</React.StrictMode>,
document.getElementById('root')
)
With this you are defining your home route and all the other routes will show 404. Check the official guide for more info.

Try This:
import React from "react";
import { Redirect, Route, Switch, BrowserRouter } from 'react-router-dom';
import HomePage from './pages/HomePage.jsx';
import NotFoundPage from './NotFoundPage.jsx';
class App extends React.Component {
render(){
return(
<BrowserRouter>
<Switch>
<Route exact path='/' component={HomePage} />
<Route path="*" component={NotFoundPage} />
</Switch>
</BrowserRouter>
)
}
}
export default App;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Simply import Switch from react-router-dom and wrap all your Routes in the Switch Component. Also Important here is to note to keep your 404Page component at the very bottom(just before your switch ending tag) This way it will match each component with its route first. If it matches, it will render the component or else check the next one. Ultimately if none matching routes will be founded, it will render 404Page

react router is a headache for new coders. Use this code format. This is class component but you can make a functional component and use it.
import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import HomePage from './pages/HomePage.jsx';
import NotFoundPage from './NotFoundPage.jsx';
import Footer from './Footer';
class App extends React.Component {
render(){
return(
<Router>
<Routes>
<Route exact path='/' element={HomePage} />
<Route path="*" element={NotFoundPage} />
</Routes>
<Routes>
<Route path="/" element={Footer}/>
</Routes>
</Router>
)
}
}
export default App;