I trie to render a certain route if a token is valid , previously set when logging in , if not valid i redirect the user to the home page. But when i compile it kept showing a blank page. The registered token aims at protecting routes , so when user who was not logged in can't access the '/auth' endpoint.
Here is the code :
If there is a change in cookies, React would not be informed, hence your component will not be rendered to render the right Route. A React component only updates when its props or states changes, or the parent component renders it directly.
You can listen to cookies and set a state to notify React that cookies has changed.
I found another solution for this problem and it works fine actually.
Code :
Related
Using the router, window.location, the link element and also the href provided by react to my knowledge do generally not cause a re-fetch of the entire react application but only cause a mounting of a new component. Is that correct?
But if I for example change the URL in the browser's URL bar from localhost:4000/hello to localhost:4000/bye will that cause a re-fetch of the entire react application or does react somehow stop the browser from doing that by recognizing that it is the same domain?
And what about the behaviour of the browser's refresh and back buttons in regards to this matter?
if you change URL by window api its refetch whole react again. but if you change URL by react router api its only change page components
I'm building up a website using ReactJS, REdux,React-Router.I want to access the data upon a different Route i.e for search functionality but I'm unable to do so. I'm only able to access data upon same page.
My App Component
Home Component
I'm dispatching the Action from SearchComponent to store.
I want to access data on /Search Route but unable to do so.
You should point to the component in route element.
Add the component attribute to the route element, pointing towards the component that it should use when hitting the search route.
Remember to import the component first.
code and preview here
I am new to React and I have set up a very basic front-end session.
The user has to sign in on that page (https://react-vc551s.stackblitz.io/signin) in order to get access to https://react-vc551s.stackblitz.io/dashboard. He is also able to log out on that page (https://stackblitz.com/edit/react-vc551s). If the user is logged out and try to access the /dashboard page, he is going to be redirected to the /signin page.
What I have hard time to do is to move the login / logout button to the navbar. My Navbar is a separate component and I don't know how to do it.
If you only need to show button based on user auth. state then, do this-
Save user auth status in local storage or cookie. Initialize the status in state variable(true or false), then in your navbar component add a condition inside your return statement.
{isAuthenticated? <button>Logout</button>:<button>Login</button>}
If I were you, I would use useContext to make my life easier to manage the auth state. The useContext is a global state which can be accessed from everywhere by calling the context. Learn more in React Context
What I want is to prevent some routes from being triggered manually via the browser URL. So, is there any way to tell if the route to be applied has been triggered manually(typing in the browser URL location) or through React router (<Link> or useHistory().push)?
When a user manually browses the entire app is remounted, when react router is used the route is "fake" and only what is new is mounted. You could set window.location to state in a component above your routing logic that is set on mount. This would stay the same when react router does the routing, but change when manually routing since the app would remount. You could examine this route for sub-paths to see if the user manually browsed.
I would suggest using protected routes instead. You could "enable" the routes when the conditions you need in your app are met.
I don't get the docs from React Router below:
But now Home can't participate in routing, like the onEnter hooks,
etc. You render in the same position as Accounts and Statements, so
the router allows you to have Home be a first class route component
with IndexRoute.
What does he mean by routing here? What is onEnter hooks?
Since App is wrapping other routes, the route that matches the given url is passed to App to be rendered via this.props.children. Because of this, you don't get access to react-router's hooks for Home if you do render Home via a statement such as {this.props.children || <Home/>}. One such hook isonEnter, which fires off a callback whenever a route is entered.
When you define Home as an IndexRoute, it is a distinct route that will match whatever route App matches. This way, we don't need the or clause in App, we can just render the child route via {this.props.children}
The docs here are a little more straightforward:
Imagine we'd like to render another component inside of App when the
URL is /. Currently, this.props.children inside of App's render method
is undefined in this case. We can use an <IndexRoute> to specify a
"default" page.
As far as onEnter the docs here are better:
Routes may also define onEnter and onLeave hooks that are invoked once
a transition has been confirmed. These hooks are useful for various
things like requiring auth when a route is entered and saving stuff to
persistent storage before a route unmounts.