I have a menu with a "login" link to open to the login page. When I click on the "login" link it does nothing...doesn't open page, just empty click. My expectation was that the login page would be displayed. I am using an existing html template that uses UL lists for the menu. I'd like to keep using the UL list for the menu, if possible, as it fits in the existing CSS and layout of the page nicely.
I've researched react-router-dom, links, routes, etc for the last 3 hours...I can't find a solution for this, I see how others made it work somehow for their project, but when I try the solutions in my project it doesn't work for me...perhaps I've got something out of order? I'm new to react, but have read/watched a bunch of tutorials and would welcome any advice or guidance.
The problem appears to be inside "HeaderMenu.js". I've included the details of the components. thanks in advance.
The rendered anchor tag looks like this after React renders it:
Login
Here is how the project is set up:
Folder Structure
/src/Index.js
/src/App.js
/src/components/Home.js
/src/components/header.js
/src/components/HeaderMenu.js
/src/components/Login.js
Index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { BrowserRouter, Routes, Route } from "react-router-dom";
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
App.js
import './App.css';
import Home from "./components/Home";
function App() {
return (
<>
<Home />
</>
);
}
export default App;
Home.js
import Header from "./header";
import Body from './body';
import Footer from "./footer";
const Home = () => {
return (
<div className="page-container">
<Header />
<Body />
<Footer />
</div>
);
}
export default Home;
header.js
import React from 'react';
import HeaderMenu from "./HeaderMenu";
const Header = () => {
return <>
<header className="header-area header-sticky wow slideInDown" data-wow-duration="0.75s" data-wow-delay="0s">
<div className="container">
<div className="row">
<div className="col-12">
<nav className="main-nav">
<HeaderMenu />
</nav>
</div>
</div>
</div>
</header>
</>
}
HeaderMenu.js
import React from "react";
import { Routes, Route, Link } from "react-router-dom";
import Login from './Login';
const HeaderMenu = () => {
return (
<>
<ul className="nav">
<li className="scroll-to-section"><a href="#top" className="active" >Home</a></li>
<li className="scroll-to-section">About Us</li>
<li className="scroll-to-section">Services</li>
<li className=""><Link to={"/Login"}>Login</Link></li>
<li className="scroll-to-section"><div className="main-red-button">Contact Now</div></li>
</ul>
</>
)
}
export default HeaderMenu;
Login.js
import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
const Login = () => {
return (
<div>
<h1> Login Page </h1>
</div>
);
};
export default Login;
You have to define routes. Like on which route, which component has to be render. For example: for "/login" you want to define a route in "app.js" file. Like below:
import "./App.css";
import Home from "./components/Home";
import { BrowserRouter, Routes, Route } from "react-router-dom";
// import all page components like following
// import Login from "./components/Login";
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/login" element={<Login />} />
</Routes>
</BrowserRouter>
);
}
export default App;
Related
There is a problem using routes in KnowledgeBase.js (code below). I'm trying to write them "inside" another Route (which is in App.js), but nothing works. Perhaps someone can find the problem.
p.s. the console does not give any errors
App.js
import React from "react";
import './App.css';
import Header from "./Components/Header/Header";
import Main from "./Components/Main/Main";
import {Route, Routes} from "react-router-dom";
import Home from "./Components/Main/Home/Home";
import Nav from "./Components/Nav/Nav";
import KnowledgeBase from "./Components/Main/KnowlegeBase/KnowledgeBase";
import Messages from "./Components/Main/Messages/Messages";
function App(props) {
return (
<div className="App">
<Header forHeader={props.state}/>
<Nav forNav={props.state}/>
<Main forMain={props.state}>
<Routes>
<Route path='/home' element={<Home forHome={props.state}/>}/>
<Route path='social-network/' element={<Home forHome={props.state}/>}/>
<Route path='/knowledge-base/*' element={<KnowledgeBase forKnowledgeBase={props.state}/>}/>
<Route path={"/messages"} element={<Messages forMessages={props.state}/>}/>
</Routes>
</Main>
</div>
);
}
export default App;
KnowledgeBase.js
import React from "react";
import style from './KnowledgeBase.module.css';
import Menu from "./Menu/Menu";
import Blocks3 from "./Blocks3/Blocks3";
import {Route, Routes} from "react-router-dom";
import BaseAll from "./BaseAll/BaseAll";
import Blocks2 from "./Blocks2/Blocks2";
import Blocks1 from "./Blocks1/Blocks1";
const KnowledgeBase = (props) => {
return (
<div className={style.knowledgeBase}>
<Menu forMenu={props.forKnowledgeBase}/>
<BaseAll forBaseAll={props.forKnowledgeBase}>
<Routes>
<Route path="/knowledge-base/purchase-and-refund" element={<Blocks3/>}/>
<Route path="/knowledge-base/popular-questions" element={<Blocks2/>}/>
<Route path="/knowledge-base/analytics" element={<Blocks1/>}/>
</Routes>
</BaseAll>
</div>
)
}
export default KnowledgeBase
BaseAll.js
import React from "react";
import style from './BaseAll.module.css'
const BaseAll = (props) => {
return (
<div className={style.baseAll}>
{props.children}
</div>
)
}
export default BaseAll
Menu.js (it has all NavLink)
import React from "react";
import style from './Menu.module.css'
import {NavLink} from "react-router-dom";
const Menu = (props) => {
return (
<div className={style.menu}>
<header>{props.forMenu.menu.header}</header>
<form action="">
<div>
<img src={props.forMenu.menu.search_img} alt=""/>
<input type="text" placeholder={props.forMenu.menu.input}/>
</div>
<button type={"submit"}>{props.forMenu.menu.search_btn}</button>
</form>
<nav>
<NavLink to={"/knowledge-base/analytics"} className={style.menu_NavLink}>{props.forMenu.menu.nav1}</NavLink>
<NavLink to={"/knowledge-base/popular-questions"} className={style.menu_NavLink}>{props.forMenu.menu.nav2}</NavLink>
<NavLink to={"/knowledge-base/purchase-and-refund"} className={style.menu_NavLink}>{props.forMenu.menu.nav3}</NavLink>
</nav>
</div>
)
}
export default Menu
I expect the relevant blocks to appear under the search menu when navigating through NavLink. I tried to implement many options in App.js and KnowledgeBase.js but couldn't find one that would work
In KnowledgeBase.js file, remove /knowledge-base from each route.
React router automatically adds the parent route path with each child. You do not have to write the parent path with each child if it's already placed inside with another route i.e. /knowledge-base/*
const KnowledgeBase = (props) => {
return (
<div className={style.knowledgeBase}>
<Menu forMenu={props.forKnowledgeBase}/>
<BaseAll forBaseAll={props.forKnowledgeBase}>
<Routes>
<Route path="/purchase-and-refund" element={<Blocks3/>}/>
<Route path="/popular-questions" element={<Blocks2/>}/>
<Route path="/analytics" element={<Blocks1/>}/>
</Routes>
</BaseAll>
</div>
)
}
I'm coming back to you after a problem I'm having with redirects in React, I've decided to resume my project from 0 and I'm still having the same problem..
When I request this page http://localhost:3000/profil I am automatically redirected to this same page with a slash at the end of the url, e.g. http://localhost:3000/profil/.
Why does the / appear automatically at the end of the url http://localhost:3000/profil/? I'm not asking anywhere.
For the test, the Profil page and the Home page are exactly the same and should return the same image, except that only the Home page returns the image.
Here is the code I am using
src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './styles/index.scss'
ReactDOM.render(
<App />,
document.getElementById('root')
);
src/App.js
import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import Routes from './components/Routes';
const App = () => {
return (
<div>
<BrowserRouter>
<Routes />
</BrowserRouter>
</div>
)
};
export default App;
src/components/Routes/index.js
import React from 'react';
import { Routes, Route } from 'react-router-dom';
import Home from '../../pages/Home';
import Panier from '../../pages/Panier';
import Profil from '../../pages/Profil';
const index = () => {
return (
<Routes>
<Route path='/' element={<Home />} />
<Route path='/profil' element={<Profil />} />
<Route path='/mes-paniers' element={<Panier />} />
<Route path='*' element={<Home />} />
</Routes>
)
};
export default index;
src/pages/Profil
import React from 'react';
const Profil = () => {
return (
<div className="profil-page">
<div className="log-container">
<div className="img-container">
<img src="./img/log.svg" alt="pic-profil" />
</div>
</div>
</div>
)
};
export default Profil;
The Home page looks like the Profil page,
src/pages/Home
import React from 'react';
const Home = () => {
return (
<div className="profil-page">
<div className="log-container">
<div className="img-container">
<img src="./img/log.svg" alt="pic-profil" />
</div>
</div>
</div>
);
};
export default Home;
The image is not found on "/profil/" while on "/home" it is displayed.
I don't understand where the problem comes from.
The problem seems solved to me. I had to reset the default settings of Google Chrome. I can now load my page /profil and no longer /profil/!
EDIT :
It still doesn't work on Brave browser. Can't get just the url http://localhost:3000/profil . It always sends me /profil/.
I am trying to add the live website URL i.e "https://covid19statswebsite.netlify.app/" so that when I click on my Button it should redirect me to the above URL. How can I do that?
Any Suggestions?
below is my Button,
import React from "react";
import "./Banner.css"
import BannerVideo from './videos/video-2.mp4'
import {Button} from "react-bootstrap";
import {useHistory} from "react-router-dom";
// import axios from './axios'
// import requests from "./Request";
function Banner(){
const history = useHistory()
return(
<div className="banner-container">
<video src={BannerVideo} autoPlay loop muted/>
<h1>ADVENTURE AWAITS</h1>
<p>What are you waiting for?</p>
/////////// Button That needs to redirect it ///////////////////////////////////////////////////////
<div className="banner-buttons">
<br/><br/><Button onClick={() => history.push("/covid")} className="covid"><span>COVID-19 Status</span></Button>
</div>
</div>
);
}
export default Banner
This is my App.js file which imports the Banner.js file above for Routes. I am not sure that the thing I want will happen with Routes or not. So I'd really love to know any other alternative if present.
import React, {useEffect} from 'react';
import './App.css';
import HomeScreen from "./screens/HomeScreen";
import LoginScreen from "./screens/LoginScreen";
import ProfileScreen from "./screens/ProfileScreen"
import {auth} from "./firebase";
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import {useDispatch, useSelector} from "react-redux";
import {login, logout, selectUser} from "./features/userSlice";
import Spain from "./countries/Spain";
import Covid from './Covid.js'
function App() {
const user = useSelector(selectUser)
const dispatch = useDispatch();
useEffect(() => {
const unsubscribe = auth.onAuthStateChanged(userAuth => {
if (userAuth){
dispatch(login({
uid: userAuth.uid,
email: userAuth.email
}))
}else {
dispatch(logout());
}
});
return unsubscribe
}, [dispatch]);
return (
<div className="App">
<Router>
{!user ? (
<LoginScreen/>
):(
<Switch>
<Route path="/profile">
<ProfileScreen/>
</Route>
<Route exact path="/">
<HomeScreen/>
</Route>
<Route path="/spain">
<Spain/>
</Route>
//////////////////// Covid part //////////////////////////////////////////////////////////
<Route path="/covid">
<Covid/>
</Route>
</Switch>
)}
</Router>
</div>
);
}
export default App;
Below is the Covid.js which I created to check whether the Route works or not.
import React from "react";
function Covid(){
return(
<div className="covid">
<h1>hello</h1>
</div>
)
}
export default Covid
Edit:
import { Link } from "react-router-dom";
<Link
to={{
pathname:
"https://.......",}}
target="_blank">
<Button>...</Button>
</Link>
try to put the link in a hyperlink.
<a
href="https://covid19statswebsite.netlify.app/"
target="_blank">
<Button>...</Button>
</a>
i am having trouble with reach router nested routes, I am trying to navigate to / and render page2, but I am stuck on "/" homepage the same page when the route changes to //
<Appjs>
import React from "react";
import "./App.css";
import Homepage from "./Components/Homepage";
import Details from "./Components/Details";
function App() {
return (
<div>
<Router>
<Homepage path="/">
<Details path="details" />
</Homepage>
</Router>
</div>
);
}
export default App;
import React, { Component, useEffect, useState } from "react";
import styled, { isStyledComponent } from "styled-components";
import NavLink from "./NavLink";
import { Link } from "#reach/router";
const Homepage = () => {
const [users, setUsers] = useState([]);
return (
<React.Fragment>
<div className={"container"}>
<Styleddiv>
<h2>Select an Account</h2>
<div style={{ padding: 0 }}>
{Object.values(users).map((item) => (
<Link to={`details/${item.name}`}>
<img src={item.profilepicture} alt="Girl in a jacket"></img>
<span>{item.name}</span>
</Link>
))}
</div>
</Styleddiv>
</div>
</React.Fragment>
);
};
export default Homepage;
Am I missing something while structuring the routes inside the router, Kindly help me
So in Homepage If i click on any Link the route changes to /details but the details page fails to render
https://codesandbox.io/s/billowing-hill-j5gmy?file=/src/Homepage.js
Did you miss your Router import on your App.js file?
import React from "react";
import { Router, Link } from "#reach/router";
import Homepage from "./Homepage";
import Details from "./Details";
export default function App() {
return (
<div>
<nav>
<Link to="/">Home</Link>
<Link to="dashboard">Detail</Link>
</nav>
<Router>
<Homepage path="/" />
<Details path="dashboard" />
</Router>
</div>
);
}
Edit: Code Sand Box
This is how I use nested routes
Code sandbox
In order to nest routes you need to place them in the child component of the route.
The render prop is used instead of component because it stops the inline functional component from being remounted every render, see explanation.
The match object contains the information about how a route matched the URL, so we can have a nested route using the url property which gives us the matched portion of the URL, see explanation.
I started off thinking this was going to be an easy issue; however I was wrong. I have the following home page:
import React,{Component} from "react";
import {Link} from "react-router-dom";
const Home = (props) =>{
return(
<div>
<h1>My Portal Home</h1>
Click <Link to="/login">Here</Link> To Log In.
</div>
)
}
export default Home;
My main component looks like this: I am certain it is NOT what it is supposed to look like:
import React, {Component} from "react";
import {Router, Route, Link} from "react-router-dom";
import Login from './login/login';
import Home from './home/home';
const Main = (props) =>{
return(
<Router>
<div>
<Route path="/" component={Home}/>
<Route path="/login" component={Login}/>
</div>
</Router>
);
};
export default Main;
Finally my index:
import React from 'react';
import ReactDOM from 'react-dom'
import Main from "./main";
import './index.css';
ReactDOM.render(<Main />,document.getElementById('root'));
When I enter the site address, the home pages does not show and I get errors (warnings):
Failed prop type: Invalid prop 'component' supplied to 'Route': the prop is not a valid React component
in Route (at main.js:11)
I am OBVIOUSLY doing this wrong, but my goal is to have a home page with a link to my login page. Assistance is greatly appreciated.
Try the following:
Main.js
import React from "react";
import {BrowserRouter, Route} from "react-router-dom";
import Login from './Login';
import Home from './Home';
const Main = () =>{
return(
<BrowserRouter>
<div>
<Route exact path="/" component={Home}/>
<Route path="/login" component={Login}/>
</div>
</BrowserRouter>
);
};
export default Main;
Home.js
import React from "react";
import {Link} from "react-router-dom";
const Home = () =>{
return(
<div>
<h1>My Portal Home</h1>
Click <Link to="/login">Here</Link> To Log In.
</div>
)
};
export default Home;
Login.js
import React from "react";
const Login = () =>{
return(
<div>
Login
</div>
);
};
export default Login;
Made a CodeSandbox, hopefully this helps
CodeSandbox
Main.js
import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
const Main = () => (
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/login">Login</Link>
</li>
</ul>
<hr />
<Route exact path="/" component={Home} />
<Route path="/login" component={Login} />
</div>
</Router>
);
const Home = () => (
<div>
<h2> Home </h2>
</div>
);
const Login = () => (
<div>
<h2> Login Page </h2>
</div>
);
export default Main;