I have made a back button for my isomorphic react application and am accessing the current URL of the page to check if my user is coming from the inside my application entry point or directly entering the URL for the subpage of my application into the browser. The thing is that if someone has hit my subpage URL directly then I redirect them to a default page otherwise I allow goBack functionality provided by withRouter HOC from React.
my code to handle Back button functionality looks like this
if(this.props.location===reactReferer.referer()){
this.props.history.push('/about')
else { this.props.history.goBack(); }}
what am I doing wrong as this doesn't seem to be working? I imported the following package and npm installed it 'react-referer'
Related
What is the need of showing different URL path in react application, I can display all the react component conditionally on same URL path
What is the need of showing different URL path in react application, I
can display all the react component conditionally on same URL path
While you could render a single React app component that conditionally renders dynamic content without using the URL path, using routing/navigation libraries like react-router allow the app to do this conditional content rendering based on the URL. In other words, instead of using internal conditions to render dynamic content the app is using the URL.
React apps are essentially Single Page Apps (SPAs), meaning when the React app is hosted on a server only the single root index.html file is requested and sent over the wire.
A single-page application (SPA) is a web application or website that
interacts with the user by dynamically rewriting the current web page
with new data from the web server, instead of the default method of a
web browser loading entire new pages. The goal is faster transitions
that make the website feel more like a native app.
Using different URL paths in the browser's address bar is an easy way to let the React app know what "page" the user is really trying to access. If all the user enters is "https://yourDomain.com/app" where the app is hosted, then how would they get to any specific page after the initial page load other than navigating there via the app's navigation? The URL path is what allows direct navigation via a browser, e.g. "https://yourDomain.com/app/login".
If I did understand you right you mean the use of different URLs on the same website for different pages of your website. If thats the case you want to use a libary for routing. I personally like React-Router-Dom, there is great documentation on online pages and Youtube. Just search vor react-router-dom v6.
You can add it like so: npm install react-router-dom
if not, please elaborate your question further
I have private pages behind a login page, if you try to reach a page the first you'll face is a redirect to the Login page and once you're logged successfully you will be redirected to the page you ask for, for example.
https://example.com/one-of-the-private-pages
redirect to
https://example.com/login
then redirect to
https://example.com/one-of-the-private-pages
the redirect is with the navigate utils from Gatsby
All this Logic is working as expected but the problem is when I need query parameters
https://example.com/one-of-the-private-pages?param1='example'
In this case, the behavior is:
Redirect to the Login page
After login
navigate(https://example.com/one-of-the-private-pages?param1='example')
then I can see a blink in the page with the parameter and a hard refresh
Finally, my URL is:
https://example.com/one-of-the-private-pages
This only happens after building to production in development mode everything works as respected
Note: I try deleting all the content on the page actually only has a div and an h1 component.
Gatsby, extends from #reach/router (from React) so it follows the behavior of it. It's intended to use only for internal navigation and, by default, does not support hashed URLs nor parameters, as the docs points:
Neither <Link> nor navigate can be used for in-route navigation with a
hash or query parameter. If you need this behavior, you should either
use an anchor tag or import the #reach/router package—which Gatsby
already depends upon—to make use of its navigate function, like so:
That's why your page blinks before losing the parameters. Don't focus on the gatsby develop/gatsby build, they have different behaviors, treat and compile the code differently and, that doesn't mean that your code has something wrong and it has stopped working in one environment, it's just that Gatsby doesn't support it.
Said that, at this point, you have two options:
Use the #reach/router dependency directly, as the documentation suggests:
import { navigate } from '#reach/router';
...
onClick = () => {
navigate('#some-link');
// OR
navigate('?foo=bar');
}
Note the import { navigate } from '#reach/router'; (not from Gatsby)
Using window.location redirection to get the parameters (manipulate them as you wish) and redirect the user accordingly.
Additionally, try using partial routes instead of absolute ones, since the internal navigation works better in that scenario, like:
navigate(/one-of-the-private-pages?param1='example')
I just solve my problem, I was using the full URL to navigate
Wrong:
navigate(https://example.com/one-of-the-private-pages?param1='example')
Correct:
navigate(/one-of-the-private-pages?param1='example')
I'm working on a project and I have two components called home , about components.
When I'm on the home component and I'm going to the about component everything all right
but When I'm on the about component and Reload the page again error not found(404).
what?
The problem is, on your first load (at home component), client receive the whole ReactJS App and the routing from that point will be handled by ReactJS App (client routing). In your second case, you are at the about (component) and reload the app, the request send to the server like .../about and no route on server match it then it returns 404.
P/S: Follow along with Next official tutorial, you will face that case and they explain quite clear about it.
https://nextjs.org/learn/basics/getting-started
Background Information:
I have been following admin-on-rest example to create my custom Admin app. I created a custom component that is pretty much the same as https://github.com/marmelab/admin-on-rest-demo/blob/master/src/Login.js
However I want to provide the functionality for users to signup within the application, so I added a Sign Up button, that we clicked will redirect to domain.com/signup
Problem:
After reading the Authentication docs and trying it out myself, I found that on each route change the event AUTH_CHECK is evaluated. However, in input params I get as resource something I already defined in my <Admin> component. Basically, I need a way to "whitelist" a path and allow users to navigate to that path without them being authenticated.
Questions:
Is there a way to create a custom signup page and whitelist the path "/signup" so that authentication is not checked?
Is this something I need to implement with custom React Router routes, or is it something at the authClient level?
Has anyone tried to add a new signup page, and how did you make it work?
I need to reload my page when I render certain component using react router. I need this because I need a JavaScript script to load again and detect a certain form tag with a particular id. If I don't reload the page, the script never detects the form's id. (This script makes some validation on the form).
If I go to the contact component from my home component (root) the script doesn't work (I can send the form with empty fields). But if I go to the contact component from home, and I reload the page, the script starts working.
This is the error I get when home is rendered and the script doesn't detect the form id:
form-submission-handler.js:162 Uncaught TypeError: Cannot read property 'addEventListener' of null at HTMLDocument.loaded (form-submission-handler.js:162)
And this is what is used to detect the id:
function loaded() {
console.log('contact form submission handler loaded successfully');
// bind to the submit event of our form
var form = document.getElementById('gform');
form.addEventListener("submit", handleFormSubmit, false);
};
document.addEventListener('DOMContentLoaded', loaded, false);
So, if I reload the page, form-submission-handler script can detect the form.
Here is a page where you can replicate what is happening. Just go to "Contacto" section, it's in the Navbar.
The form submission handler script is inside a script tag before the tag in my index.html file, where the app is rendered.
It is possible to reload page with react and react router. To reload, you would simply provide anchor link to the url with contacts, and when user clicks on that anchor, page with that url would be fetched again from the server (you do have to make sure that your server would respond to that url and return your react app)
However, people generally go to the lengths to prevent react apps from reloading, since on reload all state of your react app is lost. Also I can not think of any situation in which I actually needed to reload react app, especially not for something as ordinary as form validation and submission. So, while your need to reload might still be justified, there is strong indication that you are trying to use react in some rather strange way, and that your problem might be resolved by getting more used to react and its usual usage patterns.