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 :)
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.
When a user click on login button it will go to Login page
Like this
I am creating this website for my portfolio But i am facing an error here is my Login and loginwtihgoogle component
Login component
import React from 'react'
const Login = () => {
return (
<>
<div className='login-icon hover:text-yellow-800'>
<a href='Loginwithgoogle'>
<img src="/src/assets/login.png" alt="login icon" className='mt-2 ml-14 h-8 '/>
<figcaption className='text-white text-center ml-14 text-[9px] hover:text-yellow-800'>LOGIN</figcaption>
</a>
</div>
</>
)
}
export default Login
Here is loginwithgoogle component
import React from 'react'
import { useEffect } from 'react'
const Loginwithgoogle = () => {
function handleCallBackResponse(response){
console.log("Encoded JWT ID Token " + response.credential);
}
useEffect(() => {
google.accounts.id.initialize({
client_id: "731249793019-qbik3a0k62db0d3k5vd72j98ivkl2hds.apps.googleusercontent.com",
callback: handleCallBackResponse
});
google.accounts.id.renderButton(
document.getElementById("signInDiv"),
{ theme: "outline", size:"large"}
)
}, [])
return (
<div className="loginwithgoogle">
<div id="signInDiv">
</div>
</div>
)
}
export default Loginwithgoogle
Here it is main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import Bar from './components/Bar'
import IconsText from './components/IconsText'
import Searchbar from './components/Searchbar'
import './index.css'
import {BrowserRouter as Router, Routes,Route} from 'react-router-dom'
import Login from './components/Login'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<Router>
<Routes>
<Route path='/loginwithgoogle' element={<Login/>} />
</Routes>
</Router>
<Bar />
<IconsText />
<Searchbar/>
</React.StrictMode>
)
I need to solve this issue when someone clicked on login it should redirect to loginwthgoogle page
You can render the Bar, IconsText, and Searchbar components on their own route.
ReactDOM.createRoot(document.getElementById('root'))
.render(
<React.StrictMode>
<Router>
<Routes>
<Route
path="/"
element={(
<>
<Bar />
<IconsText />
<Searchbar />
</>
)}
/>
<Route path='/loginwithgoogle' element={<Login />} />
</Routes>
</Router>
</React.StrictMode>
);
If you want to render these components conditionally with other routes then create a layout route component.
Example:
import { Outlet } from 'react-router-dom';
const Layout = () => (
<>
<Bar />
<IconsText />
<Searchbar />
<Outlet />
</>
);
ReactDOM.createRoot(document.getElementById('root'))
.render(
<React.StrictMode>
<Router>
<Routes>
<Route element={<Layout />}>
... routes with layout ...
</Route>
... routes without layout ...
<Route path='/loginwithgoogle' element={<Login />} />
</Routes>
</Router>
</React.StrictMode>
);
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 tried everything but fail to render component when URL changes. No error messages nothing, it renders Home component but when i click on (view and edit icon)Link it just changes url, component does not render nothing happens. I couldn't find a solution, is there any way to make it work?
App.js
import "./App.css";
// import { TextFilledComp } from './Components/TextFilledComp';
import { Routes, Route } from "react-router-dom";
import { SingleTodoPage } from "./Components/SingleTodoPage";
import { EditTodo } from "./Components/EditTodo";
import { Home } from "./Components/Home";
function App() {
return (
<div>
<Routes>
<div>
<div className="header-text">Todo List</div>
<div className="box">
<Route exact path="/" element={<Home />} />
<Route path="/todo/:todoId" element={<SingleTodoPage />} />
<Route path="/edit/:TodoId" element={<EditTodo />} />
</div>
</div>
</Routes>
</div>
);
}
export default App;
Todo.js
import {
Checkbox,
List,
ListItem,
ListItemSecondaryAction,
ListItemText,
makeStyles
} from "#material-ui/core";
import DeleteIcon from "#material-ui/icons/Delete";
import EditIcon from "#material-ui/icons/Edit";
import CheckBoxIcon from "#material-ui/icons/CheckBox";
import React from "react";
import { useSelector } from "react-redux";
import { Link } from "react-router-dom";
const useStyles = makeStyles({
listRoot: {
borderWidth: "1px",
borderColor: "#aaaaaa",
borderStyle: "solid",
borderRadius: "20px"
}
});
export const TodoList = () => {
const todos = useSelector((state) => state.todo);
const classes = useStyles();
return (
<div style={{ width: "95%", margin: "10px auto" }}>
<List>
{todos.map((todo) => (
<ListItem key={todo.id} className={classes.listRoot}>
<ListItemText primary={todo.name} />
<ListItemSecondaryAction>
{/* <Checkbox
edge="end"
/> */}
<CheckBoxIcon color="primary" />
<DeleteIcon color="secondary" />
<Link to={`/edit/${todo.id}`} className="button">
<EditIcon />
</Link>
<Link to={`/todo/${todo.id}`}>view</Link>
</ListItemSecondaryAction>
</ListItem>
))}
</List>
</div>
);
};
codesandbox link for complete app
A Routes component is the replacement for Switch from v5 and should only wrap around Route components. It's solely responsible for matching the provided paths and controlling the visibility of Routes and does not know what to do with regular JSX.
function App() {
return (
<div>
<div>
<div className="header-text">Todo List</div>
<div className="box">
<Routes>
<Route path="/" element={<Home />} />
<Route path="/todo/:todoId" element={<SingleTodoPage />} />
<Route path="/edit/:todoId" element={<EditTodo />} />
</Routes>
</div>
</div>
</div>
);
}
I've also removed the exact prop as it is deprecated in v6 since all Routes are exact by default. To allow non-exact Routes, use the new path="/nonexact/*" syntax. Some more info on the new features can be found here.
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;