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>
Related
I get a blank page when I use Link.
I should see Events, date, accueil
I use the last version of react-router.
I don't know if I have to delete to?
This is my code:
import logo from './logo.svg';
import './App.css';
import React, { Component } from 'react'
// import Header from './components/Header';
import Events from './components/Events/Events';
import { BrowserRouter, Route, Routes, Link } from 'react-router-dom';
function App() {
return (
<div className="wrapper">
<h1>Marine Mammals</h1>
<nav>
<ul>
<li><Link to="/events">Events</Link></li>
<li><Link to="/date">Date</Link></li>
<li><Link to="/accueil">Accueil</Link></li>
</ul>
</nav>
<BrowserRouter>
<Routes>
<Route path='/Events' element={<Events/>}/>
</Routes>
</BrowserRouter>
</div>
);
}
export default App;
Thank you!
It seems likely that it is causing an error because Link must be a descendant of the Router (BrowserRouter) component.
import logo from './logo.svg';
import './App.css';
import React, { Component } from 'react'
import Events from './components/Events/Events';
import { BrowserRouter, Route, Routes, Link } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<div className="wrapper">
<h1>Marine Mammals</h1>
<nav>
<ul>
<li><Link to="/events">Events</Link></li>
<li><Link to="/date">Date</Link></li>
<li><Link to="/accueil">Accueil</Link></li>
</ul>
</nav>
<Routes>
<Route path='/Events' element={<Events/>}/>
</Routes>
</div>
</BrowserRouter>
);
}
I am trying to create a new react routes according to the props of components.
App.js routes the landing page to the Home component.
import "./App.css";
import Navbar from "./components/Navbar";
import Home from "./components/Home";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
function App() {
return (
<div>
<Navbar />
<Router>
<Routes>
<Route path="/" element={<Home />} />
</Routes>
</Router>
</div>
);
}
export default App;
I have service card file where I want to create new routes according to props.
Like for example
route = lorem -> /services/lorem
route = ipsum -> /services/ipsum
Servicecard looks like this
import React from "react";
import "../css/servicecard.css";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./Home";
const ServiceCard = ({ text, subClass, image, route }) => {
return (
<>
<div className={`card-container ${subClass}`} data-aos="fade-up">
<span className="card-title">{text}</span>
<img src={image} alt="service-icon" />
</div>
</>
);
};
export default ServiceCard;
i think you are talking about route params, here is an example:
export default function ParamsExample() {
return (
<Router>
<div>
<h2>Accounts</h2>
<ul>
<li>
<Link to="/netflix">Netflix</Link>
</li>
<li>
<Link to="/zillow-group">Zillow Group</Link>
</li>
<li>
<Link to="/yahoo">Yahoo</Link>
</li>
<li>
<Link to="/modus-create">Modus Create</Link>
</li>
</ul>
<Switch>
<Route path="/:param" children={<Child />} />
</Switch>
</div>
</Router>
);
}
and in the component child:
function Child() {
let { param } = useParams();
return (
<div>
<h3>ID: {param}</h3>
</div>
);
}
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.
Header Component
import React from "react";
import { BrowserRouter as Router, Link } from "react-router-dom";
import { ReactComponent as Logo } from "../../asset/crown.svg";
import "./header.scss";
const Header = () => {
return (
<div className='header'>
<Router>
<Link exact className='logo-container' to='/'>
<Logo className='logo' />
</Link>
<div className='options'>
<Link className='option' to='/shop'>
SHOP
</Link>
</div>
</Router>
</div>
);
};
export default Header;
This is my header Component in which I am using Link tag but these tags are changing the URL in the Search Bar but not actually rendering the components.
You don't need the Router inside the Header Component...You can just use Link and then in your App.js setup the Route to the Component. Like So..
App.Js
import React from "react";
import { BrowserRouter as Router, Link } from "react-router-dom";
import { ReactComponent as Logo } from "../../asset/crown.svg";
import "./header.scss";
const Header = () => {
return (
<div className='header'>
<ul>
<li className='logo-container'>
<Link to='/'>
<Logo className='logo' />
</Link>
</li>
<li>
<Link to="/shop">
SHOP
</Link>
</li>
</div>
);
};
export default Header;
//APP COMPONENT
import React from "react";
import { BrowserRouter as Router,Switch, Route } from "react-router-dom";
const App = () => {
return (
<Router>
<Switch>
<Route exact path="/" component="Home">
<Route path="/shop" component="shop">
</Switch>
</Router>
);
};
export default App;
Make sure not to use BrowserRoute inside BrowserRouter.
e.g: when you place a component inside a component it's not JSX there it gets converted to HTML and can cause an error.
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