I have a React app which is stored in an AWS CodeCommit repo, and I want to create a holding page for it. Basically, a page called maintenance.html, which I can redirect to when the rest of the site is down for maintenance. I'm not sure how to do this.
I've created maintenance.html and put it in the root folder, but when I go to mysite.com/maintenance it redirects me to mysite.com. I assume this is because React kicks in, doesn't recognise the route, and therefore redirects me.
Is there a way to create a single page in the root of a React application, which the user can navigate to directly?
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've building a lightweight preact widget that gives users different forms based on current url. I don't want to use preact-router as it would affect the routing of the parent website.
So I went with window.location. But the issue, I'm facing is when users navigate internally from one page to another,unless there is refresh, window.location doesn't update the current URL.
Hence if i want to send form 1 to users at /home and form 2 to users at /settings. Users get the same form for both /home and /settings when users navigate internally and only change when they do a refresh.
Can someone suggest me a lightweight solution to fix this? Does in-memory router works for my use-case?
I am pretty new to React and front end world.So ignore mistakes.
So i am using auth0 for authentication in my react app. Login button is a component which redirecta to auth0 authentication button and upon login user can go to /profile component. Using react router for going to profile component.
All this works perfectly in localhost.
But the moment i deployed on s3 and cloudfront. it shows profile key not found so based on various solution (https://stackoverflow.com/a/58978355/13126651)on stack now add i can see my go to profile component however the page is entirely blank nothing is being render on profile component.
UPDATE :- the error is definitely related to cloudfront, because if i directly access my s3 bucket website endpoint,it renders everything works.
I solved it by add error response 403 404 for cloud front.
I have multiple apps running in the same domain in Azure.
I added react project last week.
We have back office app separately running built using asp.net MVC.
we have react project now. When I load the react in the browser it works correctly.
let's say xxx.azurewesites.net/ will load react by default and xx.azurewebsites.net/backoffice/login.axpx will load another app.
If I type the URL to access the back office app the problem comes in, now react scripts in the browser cache picks up the URL and try to match with react router and loads no route match page. I'm unable to load the back-office app anymore if I hard reload the page it loads the BO App now. how can we handle this problem I want to access the BO App even the react is loaded in the browser. How to prevent the react from getting the URL. I want to skip react router and send the request to the server so that server will send the BO App page.
I'm new into ReactJS - I'm trying to implement login system with PHP.
I want to have different type of users - some of them should have access only to some portion of app.
Is there any way to prevent those users from accessing certain routes as /admin ?
What I want is not something as simple function that check's user accessible routes and redirecting -> I would like to HIDE/REMOVE components that user has no access to, so he would download the app containing only /login /info, so he won't even download /admin component in app (won't be able to see the code for it)
You can use Higher-Order Components.
With HOC you can wrap other components.. if user have permissions you can return wrapped component, otherwise return null or redirect user to another route.