In React(v16.13.1), The URL is changing but page is not loading.
I found the similar questions ReactJS - React Router not changing component but url is changing
and React Router URL Change but Not Component in stack and i tried from different ways but none helps me.
It may be a small mistake, Please help to rectify this.
My code follows:
App.js file
import React, { Component } from "react";
import { BrowserRouter as Router, Route,Switch,Redirect } from "react-router-dom";
import TopNav from "./components/Navbar/TopNav";
import SideNav from "./components/Navbar/SideNav";
import Dashboard from "./components/Dashboard";
import Analytics from "./components/Analytics";
import ToDo from "./components/ToDo";
class App extends React.Component {
render() {
return (
<div>
<TopNav />
<SideNav />
<Router>
<Switch>
<Route exact path="/">
<Dashboard />
</Route>
<Route exact path="/analytics">
<Analytics />
</Route>
{/* <Route exact path="/analytics" component={Analytics}></Route> */}
<Route exact path="/todo">
<ToDo />
</Route>
<Redirect to="/"></Redirect>
</Switch>
</Router>
</div>
);
}
}
export default App;
SideNav.js page as follows:
import React from "react";
import { BrowserRouter as Router, Link } from "react-router-dom";
class SideNav extends React.Component {
render() {
return (
<div className="sidebar-wrapper">
<div className="sidebar-container">
<Router>
<ul className="sidebar-menu">
<li className="active">
<i className="fa fa-cubes"></i>
<Link className="link" to="/">
Dashboard
</Link>
</li>
<li>
<i className="fa fa-pie-chart"></i>
<Link className="link" to="/analytics">
Analytics
</Link>
</li>
<li>
<i className="fa fa-medkit"></i>
<Link className="link" to="/todo">
What to do?
</Link>
</li>
</ul>
</Router>
</div>
</div>
);
}
}
export default SideNav;
Thanks in advance!
You only need one <Router> at top level of your app.
You are already using <Router> in your App component.
Wrap the SideNav component in the Router and remove the Router used in SideNav.
import React, { Component } from "react";
import {
BrowserRouter as Router,
Route,
Switch,
Redirect,
Link
} from "react-router-dom";
class SideNav extends Component {
render() {
return (
<div className="sidebar-wrapper">
<div className="sidebar-container">
{/* <Router> */}
<ul className="sidebar-menu">
<li className="active">
<i className="fa fa-cubes" />
<Link className="link" to="/">
Dashboard
</Link>
</li>
<li>
<i className="fa fa-pie-chart" />
<Link className="link" to="/analytics">
Analytics
</Link>
</li>
<li>
<i className="fa fa-medkit" />
<Link className="link" to="/todo">
What to do?
</Link>
</li>
</ul>
{/* </Router> */}
</div>
</div>
);
}
}
class App extends Component {
render() {
return (
<div>
<Router>
<SideNav />
<Switch>
<Route exact path="/">
<div>/</div>
</Route>
<Route exact path="/analytics">
<div>ana</div>
</Route>
<Route exact path="/todo">
<div>todo</div>
</Route>
<Redirect to="/" />
</Switch>
</Router>
</div>
);
}
}
export default App;
Your <SideNav /> and the main content are in seperate <Router />s. They don't see each other, and they can't work together.
Think, like two iframes navigaing independantly of each other, just without the actual iframes.
Everything that reqiures the router, basically your entire app, needs to be inside a single <Router />.
import React, { Component } from "react";
import { BrowserRouter as Router, Route, Switch, Redirect } from "react-router-dom";
import TopNav from "./components/Navbar/TopNav";
import SideNav from "./components/Navbar/SideNav";
import Dashboard from "./components/Dashboard";
import Analytics from "./components/Analytics";
import ToDo from "./components/ToDo";
class App extends React.Component {
render() {
return (
<Router>
<TopNav />
<SideNav />
<Switch>
<Route exact path="/">
<Dashboard />
</Route>
<Route exact path="/analytics">
<Analytics />
</Route>
{/* <Route exact path="/analytics" component={Analytics}></Route> */}
<Route exact path="/todo">
<ToDo />
</Route>
<Redirect to="/"></Redirect>
</Switch>
</Router>
);
}
}
export default App;
SideNav.js
import React from "react";
import { BrowserRouter as Router, Link } from "react-router-dom";
class SideNav extends React.Component {
render() {
return (
<div className="sidebar-wrapper">
<div className="sidebar-container">
<ul className="sidebar-menu">
<li className="active">
<i className="fa fa-cubes"></i>
<Link className="link" to="/">
Dashboard
</Link>
</li>
<li>
<i className="fa fa-pie-chart"></i>
<Link className="link" to="/analytics">
Analytics
</Link>
</li>
<li>
<i className="fa fa-medkit"></i>
<Link className="link" to="/todo">
What to do?
</Link>
</li>
</ul>
</div>
</div>
);
}
}
The same applies for the TopNav.js.
Related
i am trying to create a simple react project. it has a navbar, sidebar and the main content area.
first a home component is displayed.
home.js
import { useState } from "react";
import Navbar from "../navbar/navbar";
import Sidebar from "../sidebar/sidebar";
import "./style.css";
import { useSelector, useDispatch } from 'react-redux'
function Home() {
const sidebarOpen = useSelector((state) => state.sidebarOpenState);
return (
<>
<Navbar />
<div className="home-box d-flex">
{sidebarOpen && <div className="p-2 flex-fill"><Sidebar /></div>}
</div>
</>
);
}
export default Home;
my navbar has a button which will change state sidebarOpen.
my sidebar looks like this->
sidebar.js
import "./style.css";
import { Link } from "react-router-dom";
function Sidebar() {
return (
<div className="divSidebar">
<ul>
<li>
<Link to="/chess">
<img className="sidebar-img" src="images/sidebar/chess.png"></img>
<span className="sidebar-text">Chess</span>
</Link>
</li>
<li>
<Link to="/volleyball">
<img
className="sidebar-img"
src="images/sidebar/volleyball.png"
></img>
<span className="sidebar-text">Volleyball</span>
</Link>
</li>
<li>
<Link to="/football">
<img
className="sidebar-img"
src="images/sidebar/football.png"
></img>
<span className="sidebar-text">Football</span>
</Link>
</li>
<li>
<Link to="/tabletennis">
<img
className="sidebar-img"
src="images/sidebar/table-tennis.png"
></img>
<span className="sidebar-text">TableTennis</span>
</Link>
</li>
<li>
<Link to="/rugby">
<img className="sidebar-img" src="images/sidebar/rugby.png"></img>
<span className="sidebar-text">Rugby</span>
</Link>
</li>
</ul>
</div>
);
}
export default Sidebar;
when i click on chess, the respective component should be loaded.
chess.js
function Chess() {
return (
<>
<h1>chess</h1>
</>
);
}
export default Chess;
but the problem is my sidebar disappears. i only want the main content area to be changed nothing else. can someone help? let me know if u want to some more code.
---------edit
i have added console.log in two places. one is in the navbar where the toggle method is defined and another is in redux store where toggle state is defined. both the places onclick is working. i am able to see message but the sidebar is not getting rendered.
---------edit 2
App.js
import "./App.css";
import Navbar from "./components/navbar/navbar";
import { Route, Routes } from "react-router-dom";
import Chess from "./components/chess/chess";
import Volleyball from "./components/volleyball/volleyball";
import Football from "./components/football/football";
import TableTennis from "./components/tabletennis/tabletennis";
import Rugby from "./components/rugby/rugby";
import Home from "./components/home/home";
function App() {
return (
<div className="App">
<Routes>
<Route exact path="/" element={<Home />} />
<Route
path="/chess"
element={
<>
<Navbar />
<Chess />
</>
}
/>
<Route
path="/volleyball"
element={
<>
<Navbar />
<Volleyball />
</>
}
/>
<Route
path="/tabletennis"
element={
<>
<Navbar />
<TableTennis />
</>
}
/>
<Route
path="/football"
element={
<>
<Navbar />
<Football />
</>
}
/>
<Route
path="/rugby"
element={
<>
<Navbar />
<Rugby />
</>
}
/>
</Routes>
</div>
);
}
export default App;
When you click on Chess you navigate to "/chess"
So if u can't see your Navbar there, is because you have to render it there too.
Or, render the Navbar outside de Routes from BrowsterRouter.
We need to see the components rendering on "/chess" and the react-router-dom config on app.js (or on the top lvl you declare it)
----- edit ------
Ok, look this:
function App() {
return (
<BrowserRouter>
<NavBar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/test" element={<Test />} />
</Routes>
</BrowserRouter>
);
}
If you refactor your brower like this is gona be more clean to understand the code and even easy to escale.
As u see, the navBar is outside the Routes, so its gona be visible in all routes.
then you can have this:
-> one path -> one element
your Links on navbar (or sidebar or whatelse) are gona work good.
i found a way. i rendered <Sidebar /> again in all my child components.
like this->
chess.js
function Chess() {
const sidebarOpen = useSelector((state) => state.sidebarOpenState);
return (
{sidebarOpen && (
<div className="p-2 flex-fill">
<Sidebar />
</div>
)}
)
}
this way when i click on button the state is updated and sidebar is rendered automatically.
I'm trying to create my first website, but having issues with redirection to another page. I added Routes to App.jsx, and added links to Navbar; clicking on "Services" in Navbar goes to "/services", but the page doesn't show anything, only Navbar.
I also tried with NavLink, but it did't change anything. Please help me figure out what the problem is.
import React from 'react';
import "./App.css";
import { BrowserRouter, Routes,Route } from "react-router-dom";
import Home from './pages/home/Home';
import Samples from './pages/samples/Samples';
import Services from './pages/services/Services';
import Navbar from './components/navbar/Navbar';
import Reviews from './components/reviews/Reviews';
import Contacts from './components/contacts/Contacts';
const App = () => {
return (
<div>
<BrowserRouter>
<Navbar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/services" element={<Services />} />
<Route path="/samples" element={<Samples />} />
{/* <Route path="#reviews" element={<Reviews />} /> */}
</Routes>
</BrowserRouter>
</div>
)
}
export default App
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { RiMenuFill, RiCloseLine } from 'react-icons/ri';
import './navbar.css';
import MainLogo from "../../assets/MainLogo.png";
const Navbar = () => {
const [toggleMenu, setToggleMenu] = useState(false);
return (
<div>
<div className='navbar'>
<Link style={{textDecoration:"none"}} to="/">
<img src={MainLogo} alt="main_logo" className="navbar_logo"/>
</Link>
<ul className='navbar_links'>
<li>
<Link to="/services">Services</Link>
</li>
<li>
<Link to="/samples">Samples</Link>
</li>
<li>
<Link to="/">Reviews</Link>
</li>
<li>
<Link to="#gallery">Gallery</Link>
</li>
<li>
<Link to="#about">About Us</Link>
</li>
<li>
<Link to="#contacts">Contacts</Link>
</li>
</ul>
</div>
There is no issue with the routing. The issue here is that the navbar uses fixed positioning and the "/services" route content is rendered under the navbar.
Give the App component some top margin to push the content down below the navbar.
Example:
const App = () => {
return (
<div className='app'> // <-- app container
<BrowserRouter>
<Navbar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/services" element={<Services />} />
<Route path="/samples" element={<Samples />} />
{/* <Route path="#reviews" element={<Reviews />} /> */}
</Routes>
{/* <Reviews /> */}
</BrowserRouter>
</div>
)
}
app.css
.app {
margin-top: 93px; // <-- header/navbar height
}
I added {BrowserRouter} to index.js, and it worked
import React from "react";
import ReactDOM from "react-dom";
import App from './App';
import './index.css';
import { BrowserRouter } from "react-router-dom";
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
)
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 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".
I'm getting started with react and at the moment I'm struggling to adjust the styling of my navigation through different pages of my app. Despite the thorough research I made on this, I struggled to find a concise and simple explanation on how to make this possible.
App.js
import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import '../src/styles/main.css';
import Navigation from './components/layout/Navigation';
import Footer from './components/layout/Footer';
import Home from './components/pages/Home';
import About from './components/pages/About';
import Contact from './components/pages/Contact';
function App() {
return (
<Router>
<div className="App">
<Navigation />
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
<Footer />
</div>
</Router>
);
}
export default App;
Navigation.js
import React from 'react';
import {Link} from 'react-router-dom';
import logo from '../../images/logo.png'
function Navigation () {
return (
<header>
<Link to="/"><img className="logo" src={logo} alt=""/> </Link>
<nav className="menu">
{/* <img src="./images/menu.svg" alt="Menu bar" className="hero__menu-icon"/> */}
<ul className="menu__items">
<li className="menu__item"> Portfolio </li>
<li className="menu__item"> <Link to="/about"> About </Link> </li>
<li className="menu__item"> <Link to="/contact"> Contact</Link></li>
</ul>
</nav>
</header>
)
}
export default Navigation;
I've been battling with this for a while now and didn't get any success due to my limited knowledge in React. Any help would be greatly appreciated.