I'm learning React router, tried to build a pretty basic application like this Home.js:
import React from 'react';
import About from '../pages/About';
import { HashRouter as Router, Switch, Route, Link } from "react-router-dom";
const Navbar = () => {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">HOME</Link>
</li>
<li>
<Link to="/about-us">ABOUT US</Link>
</li>
</ul>
</nav>
<Switch>
<Route path="/about-us">
<About />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</Router>
)
}
const Home = () => {
return (
<>
<Navbar />
</>
)
}
export default Home;
Then in index.js render Home page:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Home from './pages/Home';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<React.StrictMode>
<Home />
</React.StrictMode>,
document.getElementById('root')
);
serviceWorker.unregister();
Problem is, Home wouldn't render in localhost:3000, terminal showed Compiled successfully! but when loading localhost:3000, it just spins forever with nothing rendered. However, if I remove the element it rendered. Folder structure set like this:
src
--pages
----About.js
----Home.js
index.js
Can anyone help?
You've created yourself an infinite loop from what it looks like. Your index.js returns your Home component, which then returns the Navbar, which has a router, which then returns the Home component, which then repeats that cycle over and over again.
This is the approach I would take, which will show the Navbar on both the about and home page, and will only show one of the pages at a time based on the current route.
// Navbar.js
const Navbar = () => {
return (
<nav>
<ul>
<li>
<Link to="/">HOME</Link>
</li>
<li>
<Link to="/about-us">ABOUT US</Link>
</li>
</ul>
</nav>
)
}
export default Navbar;
// Layout.js
import React from 'react';
import Navbar from './Navbar';
import About from '../pages/About';
import Home from '../pages/Home';
import { HashRouter as Router, Switch, Route, Link } from "react-router-dom";
const Layout = () => {
return (
<Router>
<Navbar />
<Switch>
<Route path="/about-us">
<About />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</Router>
)
}
export default Layout;
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Layout from './components/Layout';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<React.StrictMode>
<Layout />
</React.StrictMode>,
document.getElementById('root')
);
serviceWorker.unregister();
src
--components
----Navbar.js
----Layout.js
--pages
----About.js
----Home.js
index.js
Related
You cannot render a inside another . You should never have more than one in your app.
Why am I having this issue? I have checked my code and I dont have a Router inside another Router. In fact, i only have one router on my app.
This is the component:
import React from 'react';
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Portfolio from '../pages/Portfolio';
function Menu()
{
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Portfolio />} />
</Routes>
</BrowserRouter>
);
};
export default Menu;
And I call it from this component:
import React from 'react';
import AboutMe from '../components/AboutMe';
import Header from '../components/Header';
import Menu from '../components/Menu';
import Particle from '../components/Particle';
import Services from '../components/Services';
import Skills from '../components/Skills';
function Portfolio()
{
return (
<React.StrictMode>
<Particle />
<Menu />
<Header />
<div className='d-flex flex-column mt-5' id='about-me-services'>
<div><AboutMe /> </div>
<div><Services /> </div>
</div>
<Skills />
</React.StrictMode>
);
}
export default Portfolio;
Thanks for your help :)
Finally, Menu contains a Portfolio, which contains a Menu, which contains a Portfolio, which contains... etc. as super said. Thanks for your help
I'm trying to add a NavBar to the app.js file I have in react.
When I load the page the Route files are loading but the Link files set in NavBar aren't appearing.
This is the NavBar page
import React from 'react';
import { Link } from 'react-router-dom';
const NavBar = () => (
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/article">Article</Link>
</li>
<li>
<Link to="/article-list">Article List</Link>
</li>
</ul>
</nav>
)
export default NavBar;
Then below is the app.js file
import Homepage from './Pages/Homepage';
import AboutPage from './Pages/AboutPage';
import ArticlesList from './Pages/ArticlesList';
import ArticlePage from './Pages/ArticlePage';
import NavBar from './NavBar';
import {Routes, Route} from 'react-router-dom';
import './App.css';
function App() {
return (
<Routes>
<div className="App">
<NavBar />
<div id="page-body">
<Route path="/" element={<Homepage />} />
<Route path="/about" element={<AboutPage />}/>
<Route path="/article-list" element={<ArticlesList />} />
<Route path="/article" element={<ArticlePage />} />
</div>
</div>
</Routes>
);
}
export default App;
I am keeping NavBar out of the pages folder
I'm stumped as to what it could be
Just incase the react-router-dom version I have in my package.json file is:
"react-router-dom": "^6.0.0-beta.6",
index.js file:
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router} from "react-router-dom";
import './index.css';
import App from './App';
ReactDOM.render(
<Router>
<App />
</Router>,
document.getElementById('root')
);
I think your navbar should be outside of your Routes tag in app.js, and then inside your navbar file, wrap everything around a tag.
App.js should look like this:
import Homepage from './Pages/Homepage';
import AboutPage from './Pages/AboutPage';
import ArticlesList from './Pages/ArticlesList';
import ArticlePage from './Pages/ArticlePage';
import NavBar from './NavBar';
import {Routes, Route} from 'react-router-dom';
import './App.css';
function App() {
return (
<div>
<NavBar />
<Routes>
<div className="App">
<div id="page-body">
<Route path="/" element={<Homepage />} />
<Route path="/about" element={<AboutPage />}/>
<Route path="/article-list" element={<ArticlesList />} />
<Route path="/article" element={<ArticlePage />} />
</div>
</div>
</Routes>
</div>
);
}
export default App;
Additionally, your nav component should look something like this:
import React from 'react';
import { Link, Routes } from 'react-router-dom';
const NavBar = () => (
<nav>
<Routes>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/article">Article</Link>
</li>
<li>
<Link to="/article-list">Article List</Link>
</li>
</ul>
</Routes>
</nav>
)
export default NavBar;
You might also be running into a problem with the fact that you are wrapping around your App component with a but i am not 100% sure on this one.
I've been working on my first React project and used react-router to navigate to different pages. Although I have reached the functionality, I have found that I have to manually refresh the page (using F5) whenever I press the link (for eg. About or Shop in the following code) to load the content.
Here's my Code
App.js
import React from "react";
import Nav from "./Nav";
import Shop from "./Shop";
import About from "./About";
import Home from "./Home";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import "../App.css";
function App() {
return (
<Router>
<div className="App">
<Nav />
<Switch>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
<Route path="/shop" component={Shop} />
</Switch>
</div>
</Router>
);
}
export default App;
Nav.js
import React from "react";
import { BrowserRouter as Router, Link } from "react-router-dom";
import "../App.css";
function Nav() {
return (
<nav>
<h3>Adifier</h3>
<ul className="nav-links">
<Router>
<Link to="/about">
<li>About</li>
</Link>
<Link to="/shop">
<li>Shop</li>
</Link>
</Router>
</ul>
</nav>
);
}
export default Nav;
About.js
import React from "react";
function About() {
return (
<div className="App">
<h1>About Page</h1>
</div>
);
}
export default About;
Shop.js
import React from "react";
function Shop() {
return (
<div className="App">
<h1>Shop Page</h1>
</div>
);
}
export default Shop;
Thanks in advance
Remove Router from Nav.js. It has already served its purpose when you defined routes in app.js
<ul className="nav-links">
<Link to="/about">
<li>About</li>
</Link>
<Link to="/shop">
<li>Shop</li>
</Link>
</ul>
I'm working on a React web application using React router.
In my App.js file i have imported header and home component.
In home component i have 2 components called Onlinebanks and Creditcard that i imported from online-banks.js and creditcard.js files.
When the user clicks link buttons in home.js component, the Onlinebanks and Creditcard components should render.
Instead i am getting an error called Error: Invariant failed: You should not use < Link> outside a < Router>.
Why it's not working?
INDEX.JS
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
APP.JS
import React, { Component } from 'react';
import './App.css';
import Header from './components/header';
import Home from './components/home';
class Routes extends Component {
constructor(props){
super(props);
this.state = {
};
}
render(){
return (
<div className="wrapper">
<Header/>
<Home/>
</div>
);
}
}
export default Routes;
HOME.JS
import React from 'react';
import { Route, Switch, Link } from 'react-router-dom';
import Onlinebanks from './online-banks';
import Creditcard from './creditcard';
const Home = (props) => {
return (
<div className="section">
<div className="main-page">
<div className="tab-container">
<div className="tab-btns">
<Link to="/">
<div className="online-bank-btn">
Online pangad
</div>
</Link>
<Link to="/creditcard">
<div className="creditcard-btn">
Krediitkaart
</div>
</Link>
</div>
<Switch>
<Route path="/" exact component={Onlinebanks}/>
<Route path="/creditcard" exact component={Creditcard}/>
</Switch>
</div>
</div>
</div>
)
}
export default Home;
ONLINE-BANKS.JS
import React from 'react';
const Onlinebanks = (props) => {
return (
<div className="banks-container">
<input type="button" value="Pay" className="pay-btn" id="online-banks-pay"></input>
</div>
)
}
export default Onlinebanks;
CREDITCARD.JS
import React from 'react';
const Creditcard = (props) => {
return (
<div className="Creditcard-container">
<input type="button" value="Pay" className="pay-btn" id="creditcard-pay"></input>
</div>
)
}
export default Creditcard;
I don't see anywhere in your code where you imported BrowserRouter from react-router-dom which should wrap all the other components rendered by your top level componet (app.js) or entirely wrap the app component. so, first import { BrowserRouter as Router } from "react-router-dom" in index.js, then wrap App component with Router as follows
ReactDOM.render(<Router> <App /> </Router>, document.getElementById("root"));
alternatively you can wrap the retun statment in app.js with Router as follows after importing BrowserRouter as Router
return (
<Router>
<div className="wrapper">
<Header/>
<Home/>
</div>
</Router>
);
<Router> is an HOC component, so you need to use it at the top most level possible. Suggestion would be to create a separate Router component and use it within App.js file above div tag
<CustomRouter>
<div className="wrapper">
<Header/>
<Home/>
</div>
</CustomRouter>
you need to better understand how react-router-dom works.
visit here for complete routing guide react-router-dom
i found some major missings in your app.js file.
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/about">
<About />
</Route>
<Route path="/dashboard">
<Dashboard />
</Route>
</Switch>
i don't see this method in your app.js .
This is the code I have, I believe I have imported everything correctly, I am using React mdl to style it and copied and pasted the navbar code.
I also installed react dom router correctly, the individual pages display but the navbar itself doesn't on the landing page.
Can anyone help me? Thanks
App.js
import React, { Component } from "react";
import "./App.css";
import { Layout, Header, Navigation, Drawer, Content } from "react-mdl";
import Earth from "./earth.jpg";
import Main from "./components/main";
import { Link } from "react-router-dom";
class App extends Component {
render() {
return (
<div style={{ height: "300px", position: "relative" }}>
<Layout style={{ background: "src{Earth} center / cover" }}>
<Header transparent title="Title" style={{ color: "white" }}>
<Navigation>
Link
Link
Link
Link
</Navigation>
</Header>
<Drawer title="Title">
<Navigation>
<Link to="/aboutme">About Us</Link>
<Link to="/projects">Projects</Link>
<Link to="/resume">Resume</Link>
<Link to="/contact">Contact</Link>
</Navigation>
</Drawer>
<Content>
<div className="page-content">
<Main />
</div>
</Content>
</Layout>
</div>
);
}
}
export default App;
main.js
import React from 'react';
import { Switch, Route} from 'react-router-dom';
import LandingPage from './landingpage';
import AboutMe from './aboutme';
import Contact from './contact';
import Projects from './projects';
import Resume from './resume';
const Main = () => (
<Switch>
<Route exact path="/" component = {LandingPage} />
<Route path="/aboutme" component = {AboutMe} />
<Route path="/contact" component = {Contact} />
<Route path="/projects" component = {Projects} />
<Route path="/resume" component = {Resume} />
</Switch>
)
export default Main;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'react-mdl/extra/material.css';
import 'react-mdl/extra/material.js';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>
, document.getElementById('root'));
serviceWorker.unregister();
You need to wrap your App component with BrowserRouter from react-router-dom.
You can do this inside you App component, or better in index.js like this:
import { BrowserRouter } from "react-router-dom";
ReactDOM.render(<BrowserRouter><App/></BrowserRouter>, rootElement);
Codesandbox:
https://codesandbox.io/s/so-react-router-uc8dr