I'm trying to setup a basic React app using Router. However, when you click on a Link tag, it will render the correct component of EpisodeDisplay but, the endpoint will not update. I've tried changing the Route paths as well as updating the Link endpoints. When I manually type in the endpoint though (localhost:3000/season1), the MainPage will render. I'm at a loss on how to correct this issue.
Any help would be greatly appreciated!
App
import React from "react";
import MainPage from "../MainPage/MainPage";
import "./App.scss";
import { Route, Switch } from "react-router-dom";
import EpisodeDisplay from "../EpisodeDisplay/EpisodeDisplay";
const App = () => {
return (
<>
<Switch>
<Route exact path="/" render={() => <MainPage />} />
<Route exact path="/:season" render={() => <EpisodeDisplay />} />
</Switch>
</>
);
};
export default App;
MainPage
import React, { useEffect, useState } from "react";
import Seasons from "../Seasons/Seasons";
import { getSeasons } from "../../APIcalls";
import { Link } from "react-router-dom";
import "./MainPage.scss";
const MainPage = () => {
return (
<div className="div-bg">
<p>
ANIMEtrics
<br />
For My Hero Academia Fanatics
</p>
<div className="season-div">
<Link className="link" to={"/season1"}>
<article className="season-card" data-value="season-1">
Season 1
</article>
</Link>
<Link className="link" to={"/season2"}>
<article className="season-card" data-value="season-2">
Season 2
</article>
</Link>
<Link className="link" to={"/season3"}>
<article className="season-card" data-value="season-3">
Season 3
</article>
</Link>
<Link className="link" to={"/season4"}>
<article className="season-card" data-value="season-4">
Season 4
</article>
</Link>
<Link className="link" to={"/season5"}>
<article className="season-card" data-value="season-5">
Season 5
</article>
</Link>
<Link className="link" to={"/movies"}>
<article className="season-card" data-value="movies">
Movies
</article>
</Link>
</div>
</div>
);
};
export default MainPage;
Episode Display
import React from 'react';
const EpisodeDisplay = () => {
return (
<h1>Episode Display</h1>
)
}
export default EpisodeDisplay;
Can you try wrapping content inside App.js with BrowserRouter as below
import React from "react";
import MainPage from "../MainPage/MainPage";
import "./App.scss";
import { Route, Switch, BrowserRouter as Router } from "react-router-dom";
import EpisodeDisplay from "../EpisodeDisplay/EpisodeDisplay";
const App = () => {
return (
<>
<Router>
<Switch>
<Route exact path="/" render={() => <MainPage />} />
<Route exact path="/:season" render={() => <EpisodeDisplay />} />
</Switch>
</Router>
</>
);
};
export default App;
Related
I try to make a route of Register and Login components inside a div(className='container') in react-router v6, but when i try to access these components I reach a blank page, then when i rid the div class it works very well, i don't know if the problem from the div. please help me to fix it:
this is my code:
enter code here
import './App.css';
import Navbar from './components/layout/Navbar';
import Footer from './components/layout/Footer';
import Landing from './components/layout/Landing';
import {BrowserRouter as Router, Outlet, Routes, Route} from "react-router-dom";
import Register from "./components/auth/Register";
import Login from "./components/auth/Login";
function App() {
return (
<Router >
<div className="App">
<Navbar />
<Routes>
<Route path="/" element={<Landing />} />
<div className="container">
<Route path="/register" element={<Register />} />
<Route path="/login" element={<Login />} />
</div>
</Routes>
<Footer />
</div>
</Router>
);
}
export default App;
import React, { Component } from 'react';
import {Outlet} from 'react-router-dom';
class Register extends Component {
render() {
return (
<div >
<h1>Register</h1>
</div>
)
}
}
export default Register;
import React, { Component } from 'react';
import {Outlet} from 'react-router-dom';
class Login extends Component {
render() {
return (
<div>
<h2>Login</h2>
</div>
)
}
}
export default Login;
import React, { Component } from 'react';
import { Link, Outlet } from "react-router-dom";
class Landing extends Component {
render() {
return (
<div className="landing">
<div className="dark-overlay landing-inner text-light">
<div className="container">
<div className="row">
<div className="col-md-12 text-center">
<h1 className="display-3 mb-4">Developer Connector
</h1>
<p className="lead"> Create a developer profile/portfolio, share posts and get help from other developers</p>
<hr />
<Link to="/register" className="btn btn-lg btn-info mr-2">Sign Up</Link>
<Link to="/login" className="btn btn-lg btn-light">Login</Link>
</div>
</div>
</div>
</div>
</div>
)
}
};
export default Landing;
When you try to put a DIV object as a route, the problem occurs.
I suggest you remove the DIV from the APP component and put it inside each page (register, login) as needed.
Wish you the best!
import './App.css';
import Navbar from './components/layout/Navbar';
import Footer from './components/layout/Footer';
import Landing from './components/layout/Landing';
import {BrowserRouter as Router, Outlet, Routes, Route} from "react-router-dom";
import Register from "./components/auth/Register";
import Login from "./components/auth/Login";
function App() {
return (
<Router >
<div className="App">
<Navbar />
<Routes>
<Route path="/" element={<Landing />} />
<Route path="/register" element={<Register />} />
<Route path="/login" element={<Login />} />
</Routes>
<Footer />
</div>
</Router>
);
}
export default App;
Don't use div inside Routes. Use Route with some custom components.
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 am reusing this component from another project, and I can't figure out why it doesn't work in this one despite working in the other one.
It should check if the user has a token in their cookies, and then redirect to the homepage if they don't. If they do, they should see the component.
I'm not receiving any errors. The page always redirects to the homepage.
ProtectedRoutes.js
import React from "react";
import { Navigate } from "react-router-dom";
import Cookies from "universal-cookie";
const cookies = new Cookies();
export default function ProtectedRoutes({component: Component, ...rest}) {
//get the cookie if there is one
const token = cookies.get("TOKEN");
//if there is a valid cookie, show component, otherwise go to homepage
return token ? <Component /> : <Navigate to="/" />
}
App.js
import './App.css';
import React from 'react';
import {BrowserRouter, Routes, Route, Link} from 'react-router-dom';
import HomeScreen from './Components/HomeScreen';
import LoginScreen from './Components/LoginScreen';
import RegisterScreen from './Components/RegisterScreen';
import AccountScreen from './Components/AccountScreen';
import PreferencesScreen from './Components/PreferencesScreen';
import ProtectedRoutes from './Components/ProtectedRoutes';
import Cookies from 'universal-cookie';
const cookies = new Cookies();
function App() {
const openMenu = () => {
document.querySelector(".sidebar").classList.add("open");
}
const closeMenu = () => {
document.querySelector(".sidebar").classList.remove("open");
}
const logout = (e) => {
e.preventDefault();
cookies.remove("TOKEN", {path: "/"});
window.location.href="/"
}
return (
<BrowserRouter>
<div className="container">
<header className="header">
<div className="brand">
<button className="sidebar-button" onClick={openMenu}>
☰
</button>
<Link to="/" >Title</Link>
</div>
<div className="header-links">
<Link to="/signin" >Sign In</Link>
<Link to="/myaccount/" >My Account</Link>
<Link to="/logout" onClick={(e) => logout()}>Logout</Link>
</div>
</header>
<aside className="sidebar">
<button className="sidebar-close-button" onClick={closeMenu}>x</button>
<div className="sidebar-links">
<h4>New Entry</h4>
<h4>New Entry</h4>
</div>
</aside>
<main className="main">
<div className="content">
<Routes>
<Route exact path="/" element={<HomeScreen />} />
<Route exact path="/register" element={<RegisterScreen />} />
<Route exact path="/signin" element={<LoginScreen />} />
<Route exact path="/myaccount" element={<ProtectedRoutes component={AccountScreen} />} />
<Route exact path="/preferences" element={<PreferencesScreen />} />
</Routes>
</div>
</main>
</div>
</BrowserRouter>
);
}
export default App;
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>
So I have a LoginPage that looks like this,
and when you login, you will be directed to this page:
now, I want my login page to don't have a navigation and look like this,
how can I do that?
so I have this, in my App.js
import React, { Component } from 'react';
import { Route } from 'react-router-dom';
import LoginPage from "./Login";
import Main from "./Main";
import Menu from "./Menu";
class App extends Component {
constructor(props){
super(props);
this.state={
loginPage:[],
uploadScreen:[]
}
}
render() {
return (
<div className="ui container">
<Route path="/" exact component={LoginPage} />
<Menu />
<Main />
</div>
);
}
}
export default App;
My Menu.js:
import React from 'react';
import { Link } from 'react-router-dom';
import {
Container,
Dropdown,
Menu,
} from 'semantic-ui-react';
const FixedMenuLayout = () => (
<div>
<Menu fixed='top' inverted>
<Container>
<Menu.Item as='a' header>
IRC
</Menu.Item>
<Menu.Item as={ Link } to= "/upload" >Create Material</Menu.Item>
<Menu.Item as={ Link } to= "/assign-material" >Assign Material</Menu.Item>
<Menu.Item as={ Link } to= "/create-group">Create Group</Menu.Item>
<Menu.Item as={ Link } to= "/assign-doctor">Assign Group</Menu.Item>
<hr />
<Dropdown item simple text='Name of Logged In User'>
<Dropdown.Menu>
<Dropdown.Item>Log Out</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</Container>
</Menu>
</div>
)
export default FixedMenuLayout
and my Main.js:
import React from 'react';
import { Route ,Switch } from 'react-router-dom';
import UploadScreen from "./UploadScreen";
import CreateGroup from "./CreateGroup";
import AssignDoctor from "./AssignDoctor";
import AssignMaterial from "./AssignMaterial";
const Main = () => (
<main>
<Switch>
<Route path="/upload" exact component={UploadScreen} />
<Route path="/assign-material" exact component={AssignMaterial} />
<Route path="/assign-doctor" exact component={AssignDoctor} />
<Route path="/create-group" exact component={CreateGroup} />
</Switch>
</main>
)
export default Main
I am new in ReactJS so please be considerate in answering and thank you for your time!
my App.js
render() {
const path = window.location.pathname;
return (
<div className="ui container">
<Route path="/" exact component={LoginPage} />
{path !== '/' &&
<div>
<Menu />
<Main />
</div>
}
</div>
);
}
and it works now :)