Develop Reference

React Routes fail to route to different paths

I tried to lead from the home page to "/allUsers" page. The homepage has a link that directs to the all Users page. But when I click from the home page to all User page it does not show any content. The link to all Users is "http://localhost:3000/allUsers"
App.js:
import './App.css';
import { Routes, Route } from "react-router-dom";
import { BrowserRouter } from 'react-router-dom';
import React, { useState, useEffect } from "react";
import { useDispatch } from "react-redux";
import Home from './components/Home';
import allUsers from './pages/allUsers/allUsers';
import airportEmployee from './pages/AirportEmployee/airportEmployee';
import airlineEmployee from './pages/AirlineEmployee/airlineEmployee';
function App() {
return (
<div className="App">
<Routes>
<Route path="/" element={<Home />} />
<Route path="/allUsers" element={<allUsers />} />
<Route path="/airline-employee" element={<airlineEmployee />} />
<Route path="/airport-employee" element={<airportEmployee />} />
</Routes>
</div>
);
}
export default App;
Here is the Home.js file
const Home = () => {
return (
<Breadcrumbs aria-label="breadcrumb">
<Link
underline="hover"
color="inherit"
href="/allUsers"
fontSize="large"
>
All Users
</Link>
<Link
underline="hover"
color="inherit"
href="/airport-employee"
fontSize="large"
>
Airport Employee
</Link>
<Link
underline="hover"
color="inherit"
href="/airline-employee"
fontSize="large"
>
Airline Employee
</Link>
</Breadcrumbs>
);
};
export default Home;

Change this in app.js:
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom'
function App() {
return (
<div className="App">
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/allUsers" element={<allUsers />} />
<Route path="/airline-employee" element={<airlineEmployee />} />
<Route path="/airport-employee" element={<airportEmployee />} />
</Routes>
</Router>
</div>
);
}
Change in Home.js:
import App from "components/App";
import {Link} from "react-router-dom";
<Link to="/allUsers">All Users</Link>

I think route has a 'exact' keyword to match exactly the url you want.
<Route path="/allUsers" exact element={<allUsers/>} />

Route Error- A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>

I am getting the below error. I have installed npm install react-router-dom on the command prompt. Here is my code for app.js and index.js
Error:
A is only ever to be used as the child of element, never rendered directly. Please wrap your in a .
Please let me know what additionally I have to add to make the code work
**App.Js**
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
const Home = () => {
return (
<div>
<p>Home</p>
</div>
);
};
const About = () => {
return (
<div>
<p>About</p>
</div>
);
};
const Contact = () => {
return (
<div>
<p>Contact</p>
</div>
);
};
class App extends Component {
render() {
return (
<Router>
<div>
<h1>W3Adda - Simple SPA</h1>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Users</Link>
</li>
</ul>
</nav>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</div>
</Router>
);
}
}
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
reportWebVitals();

What is the error when you wrap your Route with a Routes?
<Routes>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Routes>

Try this; (change component to element)
import { BrowserRouter as Router, Routes, Route } from "react-router-
dom";
function App() {
return (
<Router>
<Navbar />
<Routes>
<Route path="/user" element={<CreateUser/>}/>
</Routes>
</Router>
);}

error 404 when refreshing gh-pages. How would i fix this to route correctly?

I have a multipage app deployed to gh-pages. Whenever i refresh the page i get an error 404. Can someone help me with this? I'm fairly new to making multipage sites and this is confusing me! everything else seems to work but this one problem.
How would i fix this to route correctly?
[VIEW SITE HERE!][1]
[Sources for code here][2]
**App.js**
import "./App.css";
import React from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Navbar from "./Navbar/Navbar";
import Home from "./Navbar/Home";
// import Contact from "./Navbar/Contact";
import Gallery from "./Navbar/Gallery";
import Investment from "./Navbar/Investment";
import Projects from "./Navbar/Projects";
import Footer from "./Footer/Footer";
import About from "./About";
function App() {
return (
<div className="App">
<Router>
<Navbar />
<Routes>
<Route path="/photo-gallery" element={<Home />} exact></Route>
<Route path="/about" element={<About />} exact></Route>
{/* <Route path="/contact" element={<Contact />} exact></Route> */}
<Route path="/gallery" element={<Gallery />} exact></Route>
<Route path="/investment" element={<Investment />} exact></Route>
<Route path="/projects" element={<Projects />} exact></Route>
</Routes>
</Router>
<Footer />
</div>
);
}
export default App;
**Navbar.js**
import React, { useState } from "react";
import { Link } from "react-router-dom";
import "./Navbar.css";
const Navbar = () => {
const [isMobile, setIsMobile] = useState(false);
return (
<nav className="nav-bar">
<h1>Noah Nigel </h1>
<ul
className={isMobile ? "nav-links-mobile" : "nav-links"}
onClick={() => setIsMobile(false)}
>
<Link to="/photo-gallery" className="home">
<li>Home</li>
</Link>
<Link to="/about" className="about">
<li>About</li>
</Link>
<Link to="/Gallery" className="gallery">
<li>Gallery</li>
</Link>
<Link to="/investment" className="investment">
<li>Investment</li>
</Link>
<Link to="/projects" className="projects">
<li>Code</li>
</Link>
{/* <Link to="/contact" className="contact">
<li>Contact</li>
</Link> */}
</ul>
<button className="mobile-menu"
onClick={() => setIsMobile(!isMobile)}
>
{isMobile ? (
<ion-icon name="close-outline"></ion-icon>
) : (
<ion-icon name="menu-outline"></ion-icon>
)}
</button>
</nav>
);
};
export default Navbar;
[1]: https://noahfarinas.github.io/photo-gallery/
[2]: https://github.com/noahfarinas/photo-gallery

My home page is always rendering above every other page ,like when i am on signin my home page data is rendered first like 2 pages in single page

My App.js
import React from "react";
import { BrowserRouter, Route } from "react-router-dom";
import Home from "./Components/screens/Home";
import Signup from "./Components/screens/Signup";
import Signin from "./Components/screens/Login";
import Profile from "./Components/screens/Profile";
import CreatePost from "./Components/screens/createPost";
import Navbar from "./Components/Navbar";
function App() {
return (
<BrowserRouter>
<Navbar />
<Route path="/">
<Home />
</Route>
<Route path="/Signin">
<Signin />
</Route>
<Route path="/Signup">
<Signup />
</Route>
<Route path="/Profile">
<Profile />
</Route>
<Route path="/create">
<CreatePost />
</Route>
</BrowserRouter>
);
}
export default App;
my navbar is containing links of all pages and is using react-router-dom but my home page is always rendering above every page , it is containing 4 other page links including home, i have just shown home and signup as error is same with other pages as well
My Navbar.js
import React from "react";
import PeopleIcon from "#material-ui/icons/People";
import IconButton from "#material-ui/core/IconButton";
import { Link } from "react-router-dom";
import "../ComponentsCss/Navbar.css";
function Navbar() {
return (
<div>
<nav>
<div className="nav-wrapper white">
<Link to="/" className="brand-logo">
Instagram
</Link>
<ul id="nav-mobile" className="right hide-on-med-and-down">
<li>
<Link to="/Signin">Signin</Link>
</li>
<li>
<Link to="/Signup">Signup</Link>
</li>
<li>
<Link to="/Profile">Profile</Link>
</li>
<li>
<Link to="/create">create</Link>
</li>
</ul>
</div>
</nav>
</div>
);
}
export default Navbar;
Home.js
import React from "react";
import "../../ComponentsCss/Home.css";
function Home() {
return (
<div className="home">
<div className="card home-card">
<h5>Ramesh</h5>
<div className="card-image">
<img src="https://images.unsplash.com/photo-1542103749-8ef59b94f47e?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cGVyc29ufGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" />
</div>
<div className="card-content">
<i className="material-icons" style={{ color: "red" }}>
favorite
</i>
<h6>TItle</h6>
<p>this is amazing post</p>
<input type="text" placeholder="add a comment" />
</div>
</div>
</div>
);
}
export default Home;
Signup.js
import React from "react";
import { Link } from "react-router-dom";
import "../../ComponentsCss/Login.css";
function Signup() {
return (
<div className="my-card">
<div className="card auth-card input-field">
<h2>Instagram</h2>
<input type="text" placeholder="name" />
<input type="email" placeholder="email" />
<input type="password" placeholder="password" />
<button
className="btn waves-effect waves-light "
type="submit"
name="action"
>
Signup
</button>
<h5>
<Link to="/signin">Already have account?</Link>
</h5>
</div>
</div>
);
}
export default Signup;
complete github code -: https://github.com/dhruv354/instagram-frontend.git

You need to make your Home route only match when is that exact route, change your App with this:
import React from "react";
import { BrowserRouter, Route } from "react-router-dom";
import Home from "./Components/screens/Home";
import Signup from "./Components/screens/Signup";
import Signin from "./Components/screens/Login";
import Profile from "./Components/screens/Profile";
import CreatePost from "./Components/screens/createPost";
import Navbar from "./Components/Navbar";
function App() {
return (
<BrowserRouter>
<Navbar />
<Route exact path="/">
<Home />
</Route>
<Route path="/Signin">
<Signin />
</Route>
<Route path="/Signup">
<Signup />
</Route>
<Route path="/Profile">
<Profile />
</Route>
<Route path="/create">
<CreatePost />
</Route>
</BrowserRouter>
);
}
export default App;

Issue
By default, Routers inclusively match routes. In other words, all routes with a matching path will be matched and rendered. Think of the path prop as a path prefix, path="/" is a prefix for every path, so it will always be matched and rendered.
Solution
Use the Switch component to exclusively render only a single matching Route component, and order the routes so the more specific paths ("/profile") can be matched before less specific paths ("/"). Your home path "/" will typically be the last route since it is the least specific.
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
function App() {
return (
<Router>
<Navbar />
<Switch>
<Route path="/Signin">
<Signin />
</Route>
<Route path="/Signup">
<Signup />
</Route>
<Route path="/Profile">
<Profile />
</Route>
<Route path="/create">
<CreatePost />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</Router>
);
}
Path order and specificity matter
In the Switch, path order and specificity matter.
If for a url "/foo/bar" and example paths:
"/foo"
"/foo/:id"
"/foo/bar"
"/foo" is a prefix for the other routes and less specific, but because of the order it will be matched and rendered since the url will match. If "/foo" wasn't there, then similarly "/foo/:id" would match and render when instead you really wanted that last "/foo/bar" path to be matched.
Update the order:
"/foo/bar"
"/foo/:id"
"/foo"
"bar" is more specific than placeholder ":id", and both are more specific than "/foo".

React-Router will not render components

I am new to React and am trying to learn to use React-Router v5. For some reason, my components will not render through the router. Once in my App.js file, I manually rendered my Login.js from there and when I would press buttons within Login.js, router would not change components but it would change the url. I have looked far and wide and I can't seem to find a fix, I feel like it is something simple I overlooked. Here is my code.
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App.js'
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render((
<BrowserRouter>
<App />
</BrowserRouter>
),
document.getElementById('root')
);
App.js
import React from 'react';
import ReactDOM from 'react-dom';
import '../index.css';
import routes from '../routes.js';
class App extends React.Component {
render() {
return (
<div className="HomeNavBar">
<routes />
</div>
);
}
}
export default App
Routes.js
import React from 'react';
import { Switch, Route, Router, withRouter } from 'react-router-dom';
/**
* Import all page components here
*/
import App from './components/App';
import Login from './components/Login.js';
import Register from './components/Register.js';
/**
* All routes go here.
* Don't forget to import the components above after adding new route.
*/
export default function routes(props) {
return (
<Switch>
<Route path='/Login' component={withRouter(Login)}/>
<Route path='/Register' component={withRouter(Register)}/>
<Route exact path='/' component={withRouter(Login)}/>
</Switch>
);
}
Login.js
import React from 'react';
import ReactDOM from 'react-dom';
import '../index.css';
import { Link, withRouter, Router } from 'react-router-dom'
class Login extends React.Component{
render() {
return (
<div>
<div class = "topnav">
<Link to="/">
<button class="HomeButton" id="b" href="#home">CollectR</button>
</Link>
<Link to="/Register">
<button id="a">SignUp</button>
</Link>
<Link to="/Login">
<button id="a" href="#Login">Login</button>
</Link>
</div>
<div id="logo">CollectR</div>
<div>
<form id="loginform">
<label id="loginregistertext">Email</label>
<input type="text" id="logintextbox" />
<label id="loginregistertext">Password</label>
<input type="Password" id="logintextbox" />
<button id="button">Login </button>
</form>
</div>
</div>
)
}
}
export default withRouter(Login)

You need like this (taken from react-router-dom documentation):
export default function App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/users">Users</Link>
</li>
</ul>
</nav>
{/* A <Switch> looks through its children <Route>s and
renders the first one that matches the current URL. */}
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/users">
<Users />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</Router>
);
}