I tried to lead from the home page to "/allUsers" page. The homepage has a link that directs to the all Users page. But when I click from the home page to all User page it does not show any content. The link to all Users is "http://localhost:3000/allUsers"
App.js:
import './App.css';
import { Routes, Route } from "react-router-dom";
import { BrowserRouter } from 'react-router-dom';
import React, { useState, useEffect } from "react";
import { useDispatch } from "react-redux";
import Home from './components/Home';
import allUsers from './pages/allUsers/allUsers';
import airportEmployee from './pages/AirportEmployee/airportEmployee';
import airlineEmployee from './pages/AirlineEmployee/airlineEmployee';
function App() {
return (
<div className="App">
<Routes>
<Route path="/" element={<Home />} />
<Route path="/allUsers" element={<allUsers />} />
<Route path="/airline-employee" element={<airlineEmployee />} />
<Route path="/airport-employee" element={<airportEmployee />} />
</Routes>
</div>
);
}
export default App;
Here is the Home.js file
const Home = () => {
return (
<Breadcrumbs aria-label="breadcrumb">
<Link
underline="hover"
color="inherit"
href="/allUsers"
fontSize="large"
>
All Users
</Link>
<Link
underline="hover"
color="inherit"
href="/airport-employee"
fontSize="large"
>
Airport Employee
</Link>
<Link
underline="hover"
color="inherit"
href="/airline-employee"
fontSize="large"
>
Airline Employee
</Link>
</Breadcrumbs>
);
};
export default Home;
Change this in app.js:
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom'
function App() {
return (
<div className="App">
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/allUsers" element={<allUsers />} />
<Route path="/airline-employee" element={<airlineEmployee />} />
<Route path="/airport-employee" element={<airportEmployee />} />
</Routes>
</Router>
</div>
);
}
Change in Home.js:
import App from "components/App";
import {Link} from "react-router-dom";
<Link to="/allUsers">All Users</Link>
I think route has a 'exact' keyword to match exactly the url you want.
<Route path="/allUsers" exact element={<allUsers/>} />
Related
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 am getting the below error. I have installed npm install react-router-dom on the command prompt. Here is my code for app.js and index.js
Error:
A is only ever to be used as the child of element, never rendered directly. Please wrap your in a .
Please let me know what additionally I have to add to make the code work
**App.Js**
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
const Home = () => {
return (
<div>
<p>Home</p>
</div>
);
};
const About = () => {
return (
<div>
<p>About</p>
</div>
);
};
const Contact = () => {
return (
<div>
<p>Contact</p>
</div>
);
};
class App extends Component {
render() {
return (
<Router>
<div>
<h1>W3Adda - Simple SPA</h1>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Users</Link>
</li>
</ul>
</nav>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</div>
</Router>
);
}
}
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
reportWebVitals();
What is the error when you wrap your Route with a Routes?
<Routes>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Routes>
Try this; (change component to element)
import { BrowserRouter as Router, Routes, Route } from "react-router-
dom";
function App() {
return (
<Router>
<Navbar />
<Routes>
<Route path="/user" element={<CreateUser/>}/>
</Routes>
</Router>
);}
i am trying to create a basic web page in react which has some <h1> text and two links - one to login page and other to register page. here is the code->
index.js
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
App.js
import './App.css';
import Header from './components/register/header';
import RegistrationForm from './components/register/registrationForm'
import { Route, Link, BrowserRouter as Router } from 'react-router-dom';
function App() {
return (
<div className="App">
<br></br>
<h1>Welcome to my website!</h1>
<br></br>
<br></br>
<br></br>
<Link to="/register">Register</Link>
<Route exact path="/register" component={RegistrationForm} />
</div>
);
}
export default App;
what i want is when i click on register button, i want the Header and RegistrationForm component to load and App component to disappear.
This code is not working. i get an empty screen.
if i remove these lines
<Link to="/register">Register</Link>
<Route exact path="/register" component={RegistrationForm} />
the App component works fine. can someone help?
---EDIT---
App.js
import "./App.css";
import Header from "./components/register/header";
import RegistrationForm from "./components/register/registrationForm";
import Home from "./components/home/home";
import { Routes, Route, Link } from "react-router-dom";
function App() {
return (
<div className="App">
<Home />
<Link to="/register">Register</Link>
<Routes>
<Route
path="/register"
element={
<>
<Header />
<RegistrationForm />
</>
}
/>
</Routes>
</div>
);
}
export default App;
Home.js
import React from "react";
function Home() {
return (
<div>
<br></br>
<h1>Welcome to my website!</h1>
<br></br>
<br></br>
<br></br>
</div>
);
}
export default Home;
//end
Router, Switch and Header are missing.
You need something like this :
import { BrowserRouter as Router } from 'react-router-dom';
render(
<Router>
<App />
</Router>,
document.getElementById('root')
);
<div className="App">
<Switch>
<Route exact path="/">
<Home/>
</Route>
<Route exact path="/register">
<Header />
<RegistrationForm/>
</Route>
</Switch>
</div>
<div className="Home">
<br />
<h1>Welcome to my website!</h1>
<br />
<br />
<br />
<Link to="/register">Register</Link>
</div>
I think you will need to make a second Switch like this to share your header between pages except Home :
<div className="App">
<Switch>
<Route exact path="/">
<Home/>
</Route>
<Route path="/">
<Header />
<Switch>
<Route exact path="/register">
<RegistrationForm/>
</Route>
{/* Other routes with the Header */}
</Switch>
</Route>
</Switch>
</div>
App.js
import "./App.css";
import Header from "./components/register/header";
import RegistrationForm from "./components/register/registrationForm";
import Home from "./components/home/home";
import { Routes, Route, Link } from "react-router-dom";
function App() {
return (
<div className="App">
<Routes>
<Route exact path="/" element={<Home />} />
<Route
path="/register"
element={
<>
<Header />
<RegistrationForm />
</>
}
/>
</Routes>
</div>
);
}
export default App;
you should wrap the app with Router :
import { BrowserRouter as Router } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Router>
<App />
</Router>
</React.StrictMode>
);
and in App.js you are missing Routes wrapping Route:
import { Routes, Route, Link } from 'react-router-dom';
function App {
*other code*
<Routes>
<Route path="/" component={Home} />
<Route path="/register" component={RegistrationForm} />
</Routes>
}
Here is the code:
import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Navbar from "./components/navbar/navbar";
import Intro from "./components/intro/intro";
import Services from "./components/services/services";
import Experience from "./components/experience/experience";
import TrelloClone from "./pages/TrelloClone/TrelloClone";
import './App.css'
function App() {
return (
<div className="App">
<BrowserRouter>
<Navbar />
<Routes>
{/* <Route path="/vanillajs" element={SpotifyClone} />
<Route path="/djangoapi" element={InstagramClone} /> */}
<Route path="/reactjs" element={<TrelloClone />} />
</Routes>
</BrowserRouter>
<Intro />
<Services />
<Experience />
</div>
);
}
export default App;
So basically I need to hide(or remove) <Intro />, <Services /> and <Experience /> by clicking the link that leads to '/reactjs' path but leave the <Navbar /> on the page.
edit: grammar and clarifications
install this history from this link, when your package is installed successfully, create a file history.js and put the below code in this file.
import {createBrowserHistory} from 'history';
export default createBrowserHistory();
import the history file in this file like import history from './history', then you will get the history props and you can console the history props and check which props are coming and you will find pathname in the history props and make a condition and as you can see in the code below.
import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import history from './history'
import Navbar from "./components/navbar/navbar";
import Intro from "./components/intro/intro";
import Services from "./components/services/services";
import Experience from "./components/experience/experience";
import TrelloClone from "./pages/TrelloClone/TrelloClone";
import './App.css'
function App() {
return (
<div className="App">
<BrowserRouter>
<Navbar />
<Routes>
{/* <Route path="/vanillajs" element={SpotifyClone} />
<Route path="/djangoapi" element={InstagramClone} /> */}
<Route path="/reactjs" element={<TrelloClone />} />
</Routes>
</BrowserRouter>
{history?.location?.pathname !== '/reactjs' &&
<>
<Intro />
<Services />
<Experience />
</>
}
</div>
);
}
export default App;
I am trying to create a navbar using Bootstrap and React. Even though my code is compiled without any errors the webpage that is rendered is completely blank. Please see my code below for reference:
app.js:
import React, { Component } from "react";
import { useState } from "react";
import logo from "./logo.svg";
import { Routes, Route, Link } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
import AddReview from "./components/add-review";
import RestaurantlLst from "./components/restaurant-list";
import Restaurants from "./components/restaurants";
import Login from "./components/login";
function App() {
const [user, setUser] = useState(null);
async function login(user = null) {
setUser(user);
}
async function logout() {
setUser(null);
}
return (
<div>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">
Restaurant Reviews
</a>
<div class="navbar-nav mr-auto">
<li class="nav-item">
<Link to={"/restaurants"}>Restaurants</Link>
</li>
<li class="nav-item">
{user ? (
<a
onClick={logout}
className="nav-link"
style={{ cursor: "pointer" }}
>
Logout {user.name}
</a>
) : (
<Link to={"/login"} className="nav-link">
Login
</Link>
)}
</li>
</div>
</nav>
<div className="container mt-3">
<Routes>
<Route
exact
path={["/", "/restaurants"]}
component={RestaurantlLst}
/>
<Route
path="/restaurants/:id/review"
render={(props) => <AddReview {...props} user={user} />}
/>
<Route
path="/restaurants/:id"
render={(props) => <Restaurants {...props} user={user} />}
/>
<Route
path="/login"
render={(props) => <Login {...props} user={user} />}
/>
</Routes>
</div>
</div>
);
}
export default App;
index.js:
import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);
All of the components are similar, as given below:
Login component:
import React from "react";
function Login() {
return <div>Login</div>;
}
export default Login;
What am I doing wrong ?
The Route component API changed in v6, there isn't any component or render prop now, they were replaced by a single element prop taking a ReactNode, a.k.a. JSX. The path prop now also only takes a single path string, not an array.
<Routes>
<Route
path="/"
element={<RestaurantlLst />}
/>
<Route
path="/restaurants"
element={<RestaurantlLst />}
/>
<Route
path="/restaurants/:id/review"
element={<AddReview user={user} />}
/>
<Route
path="/restaurants/:id"
element={<Restaurants user={user} />}
/>
<Route
path="/login"
render={<Login user={user} />}
/>
</Routes>
If these components need to access "route props" these also no longer exist. They should use the React hooks that replaced them if they need to access location, params, etc.
Another way to structure the routes is to use layout and index routes:
Example:
<Routes>
<Route path="/">
<Route index element={<Navigate to="restaurants" replace />} />
<Route path="restaurants">
<Route index element={<RestaurantlLst />} />
<Route path=":id">
<Route index element={<Restaurants user={user} />} />
<Route path="review" element={<AddReview user={user} />} />
</Route>
</Route>
</Route>
<Route
path="/login"
render={<Login user={user} />}
/>
</Routes>