I installed react-router-dom to switch between navbar elements. The library does not want to cooperate with my project. After clicking on the navbar element I am not redirected to the required component. Sometimes when I click on a selected item the menu moves slightly to the left. My code looks like this:
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
ReactDOM.render(
<App />, document.getElementById('root'));
Navbar.js
import React, { useState } from "react";
import App from '../components/App'
import About from '../components/About';
import Services from '../components/Services';
import Contact from '../components/Contact';
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
const Navbar = () => {
const [navLinkOpen, navLinkToggle] = useState(false);
const handleNavLinksToggle = () => {
navLinkToggle(!navLinkOpen);
};
const renderClasses = () => {
let classes = "navlinks";
if(navLinkOpen) {
classes += " ' ' + active";
}
return classes;
};
return (
<nav>
<div className="logo">
<h4>Delightartco</h4>
</div>
<ul className={renderClasses()}>
<Router>
<li className="link"><Link to={"/home"}>Home</Link></li>
<li className="link"><Link to={"/about"}>About</Link></li>
<li className="link"><Link to={"/services"}>Services</Link></li>
<li className="link"><Link to={"/contact"}>Contact</Link></li>
<Switch>
<Route path="/home" component={App}>
</Route>
<Route path="/about" component={About}>
</Route>
<Route path="/services" component={Services}>
</Route>
<Route path="/contact" component={Contact}>
</Route>
</Switch>
</Router>
</ul>
<div onClick={handleNavLinksToggle} className="hamburger-toggle">
<i className="fas fa-bars fa-lg"></i>
</div>
</nav>
)
}
export default Navbar;
App.js
import React from 'react';
import '../../src/App.css';
import Navbar from './Navbar';
import Wrapper from './Wrapper';
import {Content, Winnie, Testimonials, Values, Secrets, Footer} from '../components/Content';
function App() {
return (
<div>
<Navbar />
<Wrapper />
<Content />
<Winnie />
<Testimonials />
<Values />
<Secrets />
<Footer />
</div>
)
}
export default App;
These are few issues in your code:
App is your root React component, and you gave it a route: <Route path="/home" component={App}></Route>. This is causing a recursive / infinite loop. App component inside App component.
Code structure looks complex.
Here is a proposed fixed code:
index.jsx:
ReactDOM.render(<App />, document.getElementById("root"));
App.jsx:
export default function App() {
return (
<StrictMode>
<Routes />
</StrictMode>
);
}
Routes.jsx:
export default function Routes() {
return (
<Router>
{/* Route components would be visible only at their route */}
<Switch>
<Route exact path="/about" component={About}></Route>
<Route exact path="/services" component={Services}></Route>
<Route exact path="/contact" component={Contact}></Route>
</Switch>
{/* Below components would be visible always at UI */}
<Navbar /> {/* Top navigation Link's */}
<Wrapper />
<Content />
<Winnie />
<Testimonials />
<Values />
<Secrets />
<Footer /> {/* Bottom navigation Link's */}
</Router>
);
}
There are several things to keep in mind when using react-router.
The Router or BrowserRouter component should wrap all your routes and your links. Generally, if your app does not need more than one Router, its better to wrap your whole App with the Router.
The Link component's job is to simply navigate to the page and can be used anywhere you want to show a link to someplace e.g. in the Navbar.
The Route (not Router) component's placement is very important. It should be placed where you want to render the content. In your code you are rendering the routes in the Navbar and are unable to see the routes being rendered due to invalid / improper structure.
Navbar.js
Your Navbar should only contain the links while the Router should be on the top-level and the Switch / Routes should be placed where you want to render the content.
function Navbar() {
return (
<nav>
{/* Move `Router` to top-level e.g. in App.js */}
<ul>
<li className="link">
<Link to={"/home"}>Home</Link>
</li>
<li className="link">
<Link to={"/about"}>About</Link>
</li>
<li className="link">
<Link to={"/services"}>Services</Link>
</li>
<li className="link">
<Link to={"/contact"}>Contact</Link>
</li>
</ul>
{/* Move `Switch and Routes` to where you want to render the content e.g. in Content.js */}
</nav>
);
}
App.js
function App() {
return (
<Router>
<div>
<Navbar />
<Wrapper />
<Switch>
<Route path="/home" component={App}></Route>
<Route path="/about" component={About}></Route>
<Route path="/services" component={Services}></Route>
<Route path="/contact" component={Contact}></Route>
</Switch>
<Winnie />
<Testimonials />
<Values />
<Secrets />
<Footer />
</div>
</Router>
);
}
Related
I am trying to use the router in react but I get nothing when changing the path, you can check the code here Link ..............................
import React from "react";
import Layout from "./Layout";
import Home from "./Home";
import About from "./About";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
function App() {
return (
<Layout>
<Router>
<Routes>
<Route exact path="/" element={<Home />} />
<Route path="/About" element={<About />} />
</Routes>
</Router>
</Layout>
);
}
export default App;
import React from "react";
import { BrowserRouter as Router, Link } from "react-router-dom";
function Layout({ children }) {
return (
<div>
<Router>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</Router>
<div>{children}</div>
</div>
);
}
export default Layout;
Place the <div>{children}</div> inside <Router>, then in app.js remove Router. Because that has already been declared in <Layout>
Layout.js
import React from "react";
import { BrowserRouter as Router, Link } from "react-router-dom";
function Layout({ children }) {
return (
<div>
<Router>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
<div>{children}</div>
</Router>
</div>
);
}
export default Layout;
App.js
import React from "react";
import Layout from "./Layout";
import Home from "./Home";
import About from "./About";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
function App() {
return (
<Layout>
<Routes>
<Route exact path="/" element={<Home />} />
<Route path="/About" element={<About />} />
</Routes>
</Layout>
);
}
export default App;
Your current code will output the following:
<div>
<Router>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</Router>
{/* Children (App.js) */}
<Router>
<Routes>
<Route exact path="/" element={<Home />} />
<Route path="/About" element={<About />} />
</Routes>
</Router>
{/* Children (App.js) */}
</div>
You don't need two instances of <Router>.
This how it should be:
<Router>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
{/* Children (App.js) */}
<Routes>
<Route exact path="/" element={<Home />} />
<Route path="/About" element={<About />} />
</Routes>
{/* Children (App.js) */}
</Router>
you need to remove Router from your route wrap
import React from "react"; import Layout from "./Layout"; import Home from "./Home"; import About from "./About"; import { BrowserRouter as Routes, Route } from "react-router-dom";
function App() { return (
<Routes>
<Route exact path="/" element={<Home />} />
<Route path="/About" element={<About />} />
</Routes>
); }
export default App;
The Problem is, that you have two different Routers in your Application.
You need to move the Layout Component inside your Routercomponent in App.js
And then delete the second router inside of Layout.
More info here:
Error: useHref() may be used only in the context of a <Router> component. It works when I directly put the url as localhost:3000/experiences
I have a problem with react Router.
So i am building the nav of an website and when i'm doing the routes, nothing appears.
Would you help me please to see what i'm doing wrong?
The page stays white. Nothing appears, even the root doesnt see the homepage.
........................................................................................
Homepage:
import React from 'react';
import Navbar from '../allpages/navbar/Navbar';
import {
BrowserRouter as Router, Routes, Route
} from "react-router-dom";
import Contact from "../contact/Contact";
import About from "../about/About";
const Home = () => {
return (
<>
<Router>
<Navbar />
<Routes>
<Route path="/about" element={About} />
<Route path="/contact" element={Contact} />
<Route exact path="/" element={Home} />
</Routes>
</Router>
<h3>Home</h3>
</>
)
}
export default Home
Navbar:
import React from 'react';
import {
BrowserRouter as Link
} from "react-router-dom";
const Navbar = () => {
return (
<div>
<nav>
<ul>
<li>
<Link to="/home">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
</div>
)
}
export default Navbar
main app:
import './App.css';
import Home from './components/home/Home'
function App() {
return (
<>
<Home />
</>
);
}
export default App;
contact:
import React from 'react';
const Contact = () => {
return (
<div>
<h3>Contact</h3>
</div>
)
}
export default Contact
About:
import React from 'react';
const About = () => {
return (
<div>
<h1>About</h1>
</div>
)
}
export default About
So besides this typo:
{ BrowserRouter as Link } // use just Link
which is inside Navbar.js
I would also use recommended approach by React-Router team. Which uses <Switch> component to wrap pages. You are using Routes instead, idk if this is even valid.
You can check this example: https://v5.reactrouter.com/web/example/basic
which is really similar to your code.
What versión is you using? You might be out of dated
<React.Suspense fallback={<p>Loading...</p>}>
<Routes>
<Route path="/*" element={<Outlet />}>
<Route path="informacion-financiera" element={<Financiera />} />
<Route path="derechos-de-autor" element={<Author />} />
<Route
</Route>
</Routes>
</React.Suspense>
```
What versión is you using? You might be out of dated
<React.Suspense fallback={<p>Loading...</p>}>
<Routes>
<Route path="/*" element={<Outlet />}>
<Route path="informacion-financiera" element={<Financiera />} />
<Route path="derechos-de-autor" element={<Author />} />
<Route
</Route>
</Routes>
</React.Suspense>
```
You have browserRouter as Link so yow links are not links
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.
I have my app.js in that App.js I want to show some components when clicked on that router.
Here is my App.js code
import React from 'react';
import {BrowserRouter, Route} from 'react-router-dom';
import Header from './Header'
import Slider from './Slider';
import Section from './Section';
import Footer from './Footer';
import Register from './Register';
class IndecisionApp extends React.Component {
render() {
return (
<BrowserRouter>
<div className="wrapper">
<Header/>
<Route path="/register" component={Register}></Route>
<Slider />
<Section />
<Footer />
</div>
</BrowserRouter>
);
}
}
export default IndecisionApp;\
I want to hide Section and Slider components when I click on Router.
You are doing react-router wrong.
The correct way is this
<BrowserRouter>
<div className="wrapper">
<Header/>
<Switch>
<Route path="/register" component={Register}></Route>
</Switch>
<Slider />
<Section />
<Footer />
</div>
</BrowserRouter>
more on react router
https://reacttraining.com/react-router/web/guides/quick-start
Let say you have a home component and that only show as landing page including section and slide.
So there should be basically two route one is for landing another is for register, like follows
<Route path="/register" component={Register} />
<Route exact path="/" component={Home} />
But as your home/landing/index page should show section and slide together so I change the home route a little bit and finally it sum up with the following code
<BrowserRouter>
<div className="wrapper">
<Header />
<div>
<Link to="/">Home</Link>
<Link to="/register">Register</Link>
</div>
<Switch>
<Route path={"/register"} component={Register} />
<Route
exact
path="/"
render={() => (
<React.Fragment>
<Home />
<Slider />
<Section />
</React.Fragment>
)}
/>
</Switch>
<Footer />
</div>
</BrowserRouter>
Please make me clear if your idea is something different
(Updated for clarity) I have the following structure for my App:
<Layout />
/components/
<Header />
<Navigation />
<Stage />
<Footer />
/pages/
<Home />
<About />
<Contact />
My thinking is to have the <Navigation> element isolated, and imported into the parent <Header> (and later, Site Map). All components are then staged into the parent <Layout>, which is fed into the <div id="root">
The content of my /pages/ Components are successfully called and rendered with the code below. However this page content is rendered inside of my <header> element, breaking the page hierarchy.
My intention is to have the <Switch> device render the /pages/ Components within the <Stage> parent Component.
Any attempt to move the <Switch> element to the <Stage> component causes the whole app to not load/render.
import React from 'react';
import {
BrowserRouter as Router, Route, Link, Switch
} from 'react-router-dom';
import Home from './../pages/Home';
import About from './../pages/About';
import Contact from './../pages/Contact';
export default class Navigation extends React.Component {
render() {
return (
<Router>
<div className="navigation">
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
<Link to="/contact">Contact</Link>
</nav>
{/*
Below should be repositioned outside of <header>, in Stage component
*/}
<div className="stage">
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</div>
</div>
</Router>
)
}
}
My question is: How can I have the Router render the required /page/ Components inside my <Stage> component, when selected from the <Navigation> component.
Since all the reacttraining.com examples are single-page, I'm struggling to determine if I'm making a logic mistake in assuming how my app should be optimally constructed, or a programming error in recreating a relation between the two elements with react-router v4.
All you need to do is to separate these two divs as you are wrapping stage inside the header. And as the Component needs to be rendered in a single element you need another div around the whole content:
export default class Navigation extends React.Component {
render() {
return (
<Router>
<div>
<div className="navigation">
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
<Link to="/contact">Contact</Link>
</nav>
</div>
<div className="stage">
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</div>
</div>
</Router>
);
}
}
Update:
Updating my answer:
import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
const Header = () => <h1>I'm a header</h1>;
const Navigation = () => (
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
<Link to="/contact">Contact</Link>
</nav>
);
const Stage = () => (
<div>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</div>
);
const Footer = () => <h6>Footer</h6>;
const Home = () => <h3>Home</h3>;
const About = () => <h3>About</h3>;
const Contact = () => <h3>Contact</h3>;
const App = () => (
<Router>
<div>
<Header />
<Navigation />
<Stage />
<Footer />
</div>
</Router>
);
render(<App />, document.getElementById('root'));
And here is the working version:
https://codesandbox.io/s/v21BD37NX