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
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
This is my App.js
import "./App.css";
import Header from "./component/layout/Header/Header.js";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import React from "react";
import Home from "./component/Home/Home.js";
function App() {
return (
<Router>
<Header />
<Route exact path="/" component={Home} />
<Footer />
</Router>
);
}
export default App;
This is my Home.js
const Home = () => {
return (
<Fragment>
<div className="banner">
<p>Welcome to My Website</p>
</div>
</Fragment>
);
};
export default Home;
Edit: i managed to remove the black page after wrapping the Route but the text in Home.js doesn't show "Welcome to My Website"
<Routes>
<Route exact path="/" component={Home} />
</Routes>
this code ^ removed the blank page but the result is that the text from Home.js "Welcome to My Website" didn't show. How can I route correctly to the Home component?
If you are using v6 react-router-dom, you have to replace component to element
<Routes>
{/* <Route exact path="/" component={Home} /> */}
<Route exact path="/" element={<Home />} />
</Routes>
I'm in the very first step to create an project, but the react-router-dom's 'Route' just don't work. When i try to use it, just erase all other things in the screen.
My app.js:
import { BrowserRouter, Route } from 'react-router-dom';
import './App.css';
import Header from './components/Header';
import CoinPage from './Pages/CoinPage';
import Homepage from './Pages/Homepage';
function App() {
return (
<BrowserRouter>
<div>
<Header />
<Route path="/" component={Homepage} />
<Route path="/coins/:id" component={CoinPage} />
</div>
</BrowserRouter>
);
}
export default App;
My CoinPage.js:
import React from 'react'
const CoinPage = () => {
return (
<div>
Coin Page
</div>
)
}
export default CoinPage
My Homepage.js:
import React from 'react'
export const Homepage = () => {
return (
<div>
Homepage
</div>
)
}
export default Homepage
My Header.js:
import React from 'react'
/*The header it self:*/
export const Header = () => {
return (
<div>
Header
</div>
)
}
export default Header
When I remove <Route path="/" component={Homepage}/> and <Route path="/coins/:id" component={CoinPage} /> the 'Header' component appears again
You need to wrap all your Route inside Routes Component
import {
BrowserRouter,
Routes,
Route,
} from "react-router-dom";
<BrowserRouter>
<div>
<Header />
<Routes>
<Route path="/" component={Homepage} />
<Route path="/coins/:id" component={CoinPage} />
</Routes>
</div>
</BrowserRouter>
If you are using v6, then component has been replaced by element in Route
<Route path="/" element={<Homepage />} />
<Route path="/coins/:id" element={<CoinPage />} />
Solved!
I needed to change component to element and put each Route in a different Routes tag. Like that:
<BrowserRouter>
<div>
<Header />
<Routes>
<Route path="/" element={<Homepage />} />
</Routes>
<Routes>
<Route path="/coins/:id" element={<Coinpage />} />
</Routes>
</div>
</BrowserRouter>
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>
);
}
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.