You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
import React from "react";
import {
BrowserRouter as Router,
Switch,
Route,
Link,
Redirect,
useHistory,
useLocation
} from "react-router-dom";
// This example has 3 pages: a public page, a protected
// page, and a login screen. In order to see the protected
// page, you must first login. Pretty standard stuff.
//
// First, visit the public page. Then, visit the protected
// page. You're not yet logged in, so you are redirected
// to the login page. After you login, you are redirected
// back to the protected page.
//
// Notice the URL change each time. If you click the back
// button at this point, would you expect to go back to the
// login page? No! You're already logged in. Try it out,
// and you'll see you go back to the page you visited
// just before logging in, the public page.
👋 @ek77git, we use the issue tracker exclusively for bug reports and feature requests. However, this issue appears to be a support request. For usage questions, please use Stack Overflow or Reactiflux where there are a lot more people ready to help you out.
Please feel free to clarify your issue if you think it was closed prematurely.
In the package.json, change the version of react-router-dom to ~5.1.0.
For the latest version 5.2.0, the components which are out of the Switch won't be rendered after changing the history.
According to the commit below,
Separate history object to its own context [#7503].
Or, if you want to use the latest version of react-router-dom, you can use the history.listen for the AuthButton.
Referred to this.
functionAuthButton(){lethistory=useHistory();const[,forceUpdate]=useState();useEffect(()=>{returnhistory.listen(()=>{forceUpdate({});});},[history]);returnfakeAuth.isAuthenticated ? (<p>
Welcome!{" "}<buttononClick={()=>{fakeAuth.signout(()=>history.push("/"));}}>
Sign out
</button></p>) : (<p>You are not logged in.</p>);}
The below code is from "https://reacttraining.com/react-router/web/example/auth-workflow". The issue is that once you sign in it does not changes the "You are not logged in." AuthButton to the Sign out. Any idea why this is?
import React from "react";
import {
BrowserRouter as Router,
Switch,
Route,
Link,
Redirect,
useHistory,
useLocation
} from "react-router-dom";
// This example has 3 pages: a public page, a protected
// page, and a login screen. In order to see the protected
// page, you must first login. Pretty standard stuff.
//
// First, visit the public page. Then, visit the protected
// page. You're not yet logged in, so you are redirected
// to the login page. After you login, you are redirected
// back to the protected page.
//
// Notice the URL change each time. If you click the back
// button at this point, would you expect to go back to the
// login page? No! You're already logged in. Try it out,
// and you'll see you go back to the page you visited
// just before logging in, the public page.
export default function AuthExample() {
return (
);
}
const fakeAuth = {
isAuthenticated: false,
authenticate(cb) {
fakeAuth.isAuthenticated = true;
setTimeout(cb, 100); // fake async
},
signout(cb) {
fakeAuth.isAuthenticated = false;
setTimeout(cb, 100);
}
};
function AuthButton() {
let history = useHistory();
return fakeAuth.isAuthenticated ? (
Welcome!{" "}
<button
onClick={() => {
fakeAuth.signout(() => history.push("/"));
}}
>
Sign out
) : (
You are not logged in.
);
}
// A wrapper for that redirects to the login
// screen if you're not yet authenticated.
function PrivateRoute({ children, ...rest }) {
return (
<Route
{...rest}
render={({ location }) =>
fakeAuth.isAuthenticated ? (
children
) : (
<Redirect
to={{
pathname: "/login",
state: { from: location }
}}
/>
)
}
/>
);
}
function PublicPage() {
return
Public
;}
function ProtectedPage() {
return
Protected
;}
function LoginPage() {
let history = useHistory();
let location = useLocation();
let { from } = location.state || { from: { pathname: "/" } };
let login = () => {
fakeAuth.authenticate(() => {
history.replace(from);
});
};
return (
You must log in to view the page at {from.pathname}
Log in
);
}
The text was updated successfully, but these errors were encountered: