I am trying to limit user going back to the previous page,
It works but I can see previous page for millisecond and then current page reloads with
all API requests.
How can I prevent that behaviour?
import React, { Component } from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import { createBrowserHistory } from "history";
export default class Main extends Component {
componentDidMount() {
// const history = useHistory();
const history = createBrowserHistory();
history.listen((newLocation, action) => {
if (action === "PUSH") {
if (
newLocation.pathname !== this.currentPathname ||
newLocation.search !== this.currentSearch
) {
// Save new location
this.currentPathname = newLocation.pathname;
this.currentSearch = newLocation.search;
// Clone location object and push it to history
history.push({
pathname: newLocation.pathname,
search: newLocation.search,
});
}
} else {
// Send user back if they try to navigate back
history.go(1);
}
});
}
render() {
return (
<div>
<BrowserRouter>
<Switch>
<Route exact path="/" component={Page1} />
<Route path="/main/page2" component={Page2} />
<Route path="/main/page3" component={Page3} />
<Route path="/main/page4" component={Page4} />
<Route path="/main/page5" component={Page5} />
</Switch>
</BrowserRouter>
</div>
);
}
}
Try set the routes replace:
<Route path="/main/page2" component={Page2} replace={true}/>
<Route path="/main/page3" component={Page3} replace={true}/>
<Route path="/main/page4" component={Page4} replace={true}/>
<Route path="/main/page5" component={Page5} replace={true}/>
Related
I am new to localStorage and React Router, and my goal is:
Redirect user to the "/dashboard" when he is logged in, and Redirect back to '/home' when he is logged out. Also, of course, not allowing him to go to the 'dashboard' if he is not logged in. For some reason my code in App.js not working:
function App() {
let userLogged;
useEffect(() => {
function checkUserData() {
userLogged = localStorage.getItem("userLogged");
}
window.addEventListener("storage", checkUserData);
return () => {
window.removeEventListener("storage", checkUserData);
};
}, []);
return (
<div className="App">
<React.StrictMode>
<Router>
<Routes>
<Route path="/" element={<Home />} />
{userLogged ? (
<Route path={"/dashboard"} element={<Dashboard />} />
) : (
<Route path={"/home"} element={<Home />} />
)}
</Routes>
</Router>
</React.StrictMode>
</div>
);
}
export default App;
I set it in the home and dashboard pages by localStorage.setItem('userLogged', false) and localStorage.setItem('userLogged', true)
You can only listen to changes in localStorage from other window/browser contexts, not from within the same browser/window context. Here it's expected the window knows its own state. In this case, you actually need some React state.
Convert the userLogged to a React state variable and use a useEffect hook to initialize and persist the userLogged state to/from localStorage. Instead of conditionally rendering Route components, create a wrapper component to read the userLogged value from localStorage and conditionally render an Outlet for nested/wrapped routes or a Navigate component to redirect to your auth route to login.
Example:
import { Navigate, Outlet, useLocation } from 'react-router-dom';
const AuthWrapper = () => {
const location = useLocation(); // current location
const userLogged = JSON.parse(localStorage.getItem("userLogged"));
return userLogged
? <Outlet />
: (
<Navigate
to="/"
replace
state={{ from: location }} // <-- pass location in route state
/>
);
};
...
function App() {
const [userLogged, setUserLogged] = useState(
JSON.parse(localStorage.getItem("userLogged"))
);
useEffect(() => {
localStorage.setItem("userLogged", JSON.stringify(userLogged));
}, [userLogged]);
const logIn = () => setUserLogged(true);
const logOut = () => setUserLogged(false);
return (
<div className="App">
<React.StrictMode>
<Router>
<Routes>
<Route path="/" element={<Home logIn={logIn} />} />
<Route path={"/home"} element={<Home logIn={logIn} />} />
<Route element={<AuthWrapper />}>
<Route path={"/dashboard"} element={<Dashboard />} />
</Route>
</Routes>
</Router>
</React.StrictMode>
</div>
);
}
export default App;
Home
import { useLocation, useNavigate } from 'react-router-dom';
const Home = ({ logIn }) => {
const { state } = useLocation();
const navigate = useNavigate();
const loginHandler = () => {
// authentication logic
if (/* success */) {
const { from } = state || {};
// callback to update state
logIn();
// redirect back to protected route being accessed
navigate(from.pathname, { replace: true });
}
};
...
};
You can render both route and use Navigate component to redirect. Like this -
// [...]
<Route path={"/dashboard"} element={<Dashboard />} />
<Route path={"/home"} element={<Home />} />
{
userLogged ?
<Navigate to="/dashboard" /> :
<Navigate to="/home" />
}
// other routes
Whenever you logout, you need to manually redirect to the desired page using useNavigate hook.
I have tried to disable back button in browser but it just reloading the page to the path="/"
How can I disable back button of the browser, so when user clicks it nothing happens??
export default class Main extends Component {
componentDidMount() {
const history = createBrowserHistory();
history.listen((newLocation, action) => {
if (action === "POP") {
history.go(0);
}
});
}
render() {
return (
<div>
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/main/component1" component={Component1} />
<Route path="/main/component2" component={Component2} />
<Route path="/main/component3" component={Component3} />
</Switch>
</Router>
</div>
);
}
}
You can do it using react-router-dom
import { useHistory } from "react-router-dom";
let history = useHistory();
history.replace("/login");
Basically, I'm working on the DataTurks project but I've stumbled upon some problems linked to the frontend app named bazaar. I'm trying to create a new component and add a new route for it so I can access it. This is my code for my routes:
import React from 'react';
import {IndexRoute, Route} from 'react-router';
// import { isLoaded as isAuthLoaded, load as loadAuth } from 'redux/modules/auth';
import {
App,
Home,
NotFound,
TaggerLogin,
TaggerSpace,
TaggerCreate,
TaggerImport,
TaggerStats,
TaggerExport,
TaggerProjects,
TaggerAdd,
TaggerOveriew,
TaggerVisualize,
TaggerEdit,
TaggerOrg,
TaggerOrgProject,
TaggerError,
TaggerKeyBind,
TaggerContributors,
ConfirmMail
} from 'containers';
export default (store) => {
const requireLogin = (nextState, replace, cb) => {
const { auth: { user }} = store.getState();
if (!user) {
// oops, not logged in, so can't be here!
replace('/projects/login');
}
cb();
};
/**
* Please keep routes in alphabetical order
*/
return (
<Route path="/" component={App}>
<Route path="confirm" component={ConfirmMail}/> //THIS IS THE COMPONENT I'M TRYING TO ACCESS
{ /* Home (main) route */ }
<IndexRoute component={Home}/>
{ /* Routes requiring login */ }
<Route onEnter={requireLogin}>
<Route path="projects/create" component={TaggerCreate}/>
<Route path="projects/edit" component={TaggerEdit}/>
<Route path="projects/:orgName/create" component={TaggerCreate}/>
<Route path="projects/:orgName/import" component={TaggerImport}/>
<Route path="projects/:orgName/:projectName/edit" component={TaggerEdit}/>
<Route path="projects/:orgName/:projectName/keybind" component={TaggerKeyBind}/>
</Route>
{ /* Dataturks tool */}
<Route path="projects/login" component={TaggerLogin}/>
<Route path="projects/import" component={TaggerImport}/>
<Route path="projects/space" component={TaggerSpace}/>
<Route path="projects/stats" component={TaggerStats}/>
<Route path="projects/export" component={TaggerExport}/>
<Route path="projects" component={TaggerProjects}/>
<Route path="projects/add" component={TaggerAdd}/>
<Route path="projects/overview" component={TaggerOveriew}/>
<Route path="projects/visualize" component={TaggerVisualize}/>
<Route path="projects/errors" component={TaggerError}/>
<Route path="projects/:orgName" component={TaggerOrg} />
<Route path="projects/:orgName/:projectName" component={TaggerOrgProject} />
<Route path="projects/:orgName/:projectName/space" component={TaggerSpace}/>
<Route path="projects/:orgName/:projectName/export" component={TaggerExport}/>
<Route path="projects/:orgName/:projectName/overview" component={TaggerOveriew}/>
<Route path="projects/:orgName/:projectName/visualize" component={TaggerVisualize}/>
<Route path="projects/:orgName/:projectName/contributors" component={TaggerContributors}/>
{ /* Catch all route */ }
<Route path="*" component={NotFound} status={404} />
</Route>
);
};
What I'm trying to access is ConfirmMail component and route. The ConfirmMail component:
import React from 'react';
export default function ConfirmMail() {
const styles = require('./ConfirmMail.scss');
return (
<div className="container">
<div className={styles.loading + ' text-center'}>
<span className="glyphicon glyphicon-repeat glyphicon-refresh-animate gi-3x">
CONFIRMED
</span>
</div>
</div>
);
}
Also, the client.js:
import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import createStore from './redux/create';
import ApiClient from './helpers/ApiClient';
import {Provider} from 'react-redux';
import { Router, browserHistory } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux';
import { ReduxAsyncConnect } from 'redux-async-connect';
import useScroll from 'scroll-behavior/lib/useStandardScroll';
import {persistStore} from 'redux-persist';
import getRoutes from './routes';
import { Segment } from 'semantic-ui-react';
const client = new ApiClient();
const _browserHistory = useScroll(() => browserHistory)();
console.log('window data is', window._data);
const store = createStore(_browserHistory, client, window.__data);
const history = syncHistoryWithStore(_browserHistory, store);
class AppProvider extends React.Component {
constructor() {
super();
this.state = { rehydrated: false };
}
componentWillMount() {
persistStore(store, { blacklist: ['routing', 'dataturksReducer'] }, () => {
this.setState({ rehydrated: true });
});
}
render() {
const component = (
<Router render={(props) =>
<ReduxAsyncConnect {...props} helpers={{client}} filter={item => !item.deferred} />
} history={history}>
{getRoutes(store)}
</Router>
);
if (!this.state.rehydrated) {
return (<div><Segment basic loading/></div>);
} else if (this.state.rehydrated) {
console.log('rehydrating ', component);
return (
<Provider store={store} key="provider">
{component}
</Provider>);
}
}
}
const dest = document.getElementById('content');
ReactDOM.render(
<AppProvider />,
dest
);
// const persistor = persistStore(store, {}, () => { this.rehydrated = true; });
This is the main App.js component in this project.
So when I access localhost/confirm, I don't get a 404 not found page but I get an empty page. Earlier I've tried to console.log a few things but it didn't work either. I've been working on this my whole day and I didn't manage to make it work. Does someone know what am I doing wrong?
Did you try to add / in Route path?
<Route path="/confirm"
You need to add / before every route. That's why it is not getting the component you want. So modify your code by adding / like the following
<Route path="/confirm" component={ConfirmMail}/>
And another thing that I recommend you to do is enclose your routers inside <Switch></Sitch>. If the URL is /confirm, then all routes below it will be rendered. This is by design, allowing us to compose s into our apps in many ways, like sidebars and breadcrumbs, bootstrap tabs, etc.
Occasionally, however, we want to pick only one to render. If we’re at /confirm we don’t want to also match /:orgName If so you will end up with 404 error.
Here’s how to do it with Switch:
return (
<Switch>
<Route path="/" component={App}/>
<Route path="confirm" component={ConfirmMail}/> //THIS IS THE COMPONENT I'M TRYING TO ACCESS
{ /* Home (main) route */ }
<IndexRoute component={Home}/>
{ /* Routes requiring login */ }
<Route onEnter={requireLogin}>
<Route path="projects/create" component={TaggerCreate}/>
<Route path="projects/edit" component={TaggerEdit}/>
<Route path="projects/:orgName/create" component={TaggerCreate}/>
<Route path="projects/:orgName/import" component={TaggerImport}/>
<Route path="projects/:orgName/:projectName/edit" component={TaggerEdit}/>
<Route path="projects/:orgName/:projectName/keybind" component={TaggerKeyBind}/>
</Route>
{ /* Dataturks tool */}
<Route path="projects/login" component={TaggerLogin}/>
<Route path="projects/import" component={TaggerImport}/>
<Route path="projects/space" component={TaggerSpace}/>
<Route path="projects/stats" component={TaggerStats}/>
<Route path="projects/export" component={TaggerExport}/>
<Route path="projects" component={TaggerProjects}/>
<Route path="projects/add" component={TaggerAdd}/>
<Route path="projects/overview" component={TaggerOveriew}/>
<Route path="projects/visualize" component={TaggerVisualize}/>
<Route path="projects/errors" component={TaggerError}/>
<Route path="projects/:orgName" component={TaggerOrg} />
<Route path="projects/:orgName/:projectName" component={TaggerOrgProject} />
<Route path="projects/:orgName/:projectName/space" component={TaggerSpace}/>
<Route path="projects/:orgName/:projectName/export" component={TaggerExport}/>
<Route path="projects/:orgName/:projectName/overview" component={TaggerOveriew}/>
<Route path="projects/:orgName/:projectName/visualize" component={TaggerVisualize}/>
<Route path="projects/:orgName/:projectName/contributors" component={TaggerContributors}/>
{ /* Catch all route */ }
<Route path="*" component={NotFound} status={404} />
</Switch>
);
In AppRouter, I have a conditional route with redirect for <AdminLayout/>.
relevant snippet:
<Route
exact
path="/admin"
strict
render={(props) => <AdminLayout {...props} />}
>
{loggedIn ? <Redirect to="/admin/summary" /> : <Login />}
</Route>
If loggedIn is true then, redirect to /admin/summary else redirect it back to <Login/>
The problem is: it is only changing the URL but not rendering the <AdminLayout/>.
Not sure where I am going wrong and what I am missing.
UPDATED PrivateRoute and AppRouter below
AppRouter
import React, { useEffect } from "react";
import { Router, Route, Switch, Redirect } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { createBrowserHistory } from "history";
import { alertActions } from "../actions";
import { history } from "../helpers";
import AdminLayout from "layouts/Admin/Admin.js";
import AuthLayout from "layouts/Auth/Auth.js";
import ResetPassword from "../components/pages/reset-password/ResetPassword";
import MailReset from "../components/pages/reset-password/MailReset";
import PrivateRoute from "../routes/PrivateRoute";
import Dashboard from "views/Dashboard";
const hist = createBrowserHistory();
const AppRouter = () => {
const alert = useSelector((state) => state.alert);
const dispatch = useDispatch();
useEffect(() => {
history.listen((location, action) => {
// clear alert on location change
dispatch(alertActions.clear());
});
}, []);
return (
<Router history={hist}>
<Switch>
{/* <Route path="/admin" render={(props) => <AdminLayout {...props} />} /> */}
<PrivateRoute exact path="/admin">
<Dashboard />
</PrivateRoute>
<Route
path="/auth/login"
render={(props) => <AuthLayout {...props} />}
/>
<Route exact path="/auth/forgotPassword" component={ResetPassword} />
<Route exact path="/auth/mail_reset" component={MailReset} />
<Redirect from="*" to="/auth/login" />
</Switch>
</Router>
);
};
export default AppRouter;
PrivateRoute
import React from "react";
import { Route, Redirect } from "react-router-dom";
import AdminLayout from "../layouts/Admin/Admin";
function PrivateRoute({ component: Component, roles, ...rest }) {
console.log("rest pvt route", ...rest);
return (
<Route
{...rest}
render={(props) => {
console.log("propsssss", props);
// if (!localStorage.getItem('userid')) {
if (!localStorage.getItem("access_token")) {
// not logged in so redirect to login page with the return url
return (
<Redirect
to={{ pathname: "/auth/login", state: { from: props.location } }}
/>
);
}
// logged in so return component
return <AdminLayout {...props} />;
}}
/>
);
}
export default { PrivateRoute };
So trying to explain what its is wrong:
You are setting rendering child and render props that's why children props takes priority here:
<Route
exact
path="/admin"
render={(props) => <AdminLayout {...props} />}
>
{loggedIn ? <Redirect to="/admin/summary" /> : <Login />}
</Route>
Your private route is correct but need to add your layout as well:
return <AdminLayout {...props} /><Component {...props} /></AdminLayout/>;
Inside app route you need to import PrivateRoute component it will look like this:
import PrivateRoute from './PrivateRoute';
const AppRouter = () => {
const alert = useSelector((state) => state.alert);
const loggedIn = useSelector((state) => state.authentication.loggedIn);
const dispatch = useDispatch();
useEffect(() => {
history.listen((location, action) => {
// clear alert on location change
dispatch(alertActions.clear());
});
}, []);
return (
<Router history={hist}>
<Switch>
<PrivateRoute exact path='/admin'>
<YOUR AUTH COMPONENT WHICH YOU WANT TO RENDER />
</PrivateRoute>
<Route
path='/auth/login'
render={(props) => <AuthLayout {...props} />}
/>
<Route exact path='/auth/forgotPassword' component={ResetPassword} />
<Route exact path='/auth/mail_reset' component={MailReset} />
<Redirect from='*' to='/auth/login' />
</Switch>
</Router>
);
};
Here I created demo code of this. Take reference from it: https://codesandbox.io/s/react-router-redirects-auth-forked-6q6o4?file=/example.js
I am passing a property from my "Root" to my a react-route, "Home".
When the "state" (state.loggedIn) of my app changes, "Home" is updated (the appearance changes as expected) but "shouldComponentUpdate" is not called.
I want to use "shouldComponentUpdate" to detect if a property ("loggedIn") changed in the Root, and do some extra work.
// Root.js
import {Provider} from 'react-redux';
import {
BrowserRouter as Router,
Redirect,
Route,
Switch} from 'react-router-dom';
...
render() {
const store = this.props.store;
const loggedIn = this.state.loggedIn;
const handleLogin = this.handleLogin;
const handleLogout = this.handleLogout;
return (
<Provider store={store}>
<Router history={browserHistory}>
<Switch>
<Route exact path="/" component={
(props) => (
<Home
history={props.history}
loggedIn={loggedIn}
handleLogout={handleLogout}/>)} />
<Route path="/login" component={
(props) => (
<Login
history={props.history}
handleLogin={handleLogin}/>)} />
<Route path="/workflow" component={
loggedIn ?
((props) => (
<Workflows
history={props.history}
match={props.match}/>)) :
((props) => (
<Redirect to={
{
pathname: '/',
state: {from: props.location},
}
}/>)) }/>
</Switch>
</Router>
</Provider>
);
}
// Home.js
shouldComponentUpdate(nextProps, nextState) {
console.log(nextProps);
console.log(nextState);
if(nextProps.loggedIn !== nextState.loggedIn) {
if(nextState.loggedIn) {
this.socket.connect();
} else {
this.socket.disconnect();
}
}
return true;
}
It looks like your component is being remounted after every state change. That would explain why the component is redrawn, but the lifecyle function shouldComponentUpdate() isn't called. If you stick a log statement in componentWillMount() you should see it being called multiple times.