I have a nested structure where i host the react build as follows level1/level2/level3. When i hit the static hosted build using serve with localhost:3000/level1/level2/level3 it redirects correctly to localhost:3000/level1/level2/level3/title/cat/id. But when i try to hit
localhost:3000/level1/level2/level3/title1/cat1/id1 directly it just returns Not found.
I have the browser router code as follows
<BrowserRouter>
<Switch>
<Route path="/level1/level2/level3/:pageTitle/:category/:id" render={AppBody}/>
<Redirect from="/level1/level2/level3/" to="/level1/level2/level3/title/cat/id"/>
</Switch>
</BrowserRouter>
Why does default redirect work but not when we try to hit the url directly?What's the correct way to fix this?
This works just fine for me, so I think there is some other aspect of your code that is causing a problem.
Here's a code sandbox with a simple index.js that includes your router code:
https://codesandbox.io/s/vmyzkj1lvy
You can use this URL to see the results for the particular URL you mentioned:
https://vmyzkj1lvy.codesandbox.io/level1/level2/level3/title1/cat1/id1
The problem could not be actually the react router but instead your server. So first check that your server is actually returning a response when visiting /level1/level2/level3/title1/cat1/id1.
Your react router is actually changing the url in the browser when it hits <Redirect from="/level1/level2/level3/" to="/level1/level2/level3/title/cat/id"/> without sending a request to the server.
You can use this python gist as a server for static serving for your react app that I believe would solve your problem ;)
Related
App works fine on local machine (says everyone), but the deployment doesn't work at all. I can NOT seem to figure out the problem. Any suggestions? I'll link the source and deployment below:
Demo: https://ploymahloy.github.io/ecommerce-material-ui/
Source: https://github.com/ploymahloy/ecommerce-material-ui
GitHub Pages does not support browser history like your browser does. In your case, the route https://ploymahloy.github.io/ecommerce-material-ui/ doesn't help GitHub Pages understand where to point the user (since it is a frontend route).
Solution 1
You need to use a Hash Router instead of a Browser Router in your application. This type of router uses the hash portion of the URL to keep the UI in sync with the URL.
// index.js
ReactDOM.render(
<React.StrictMode>
<HashRouter>
<App />
</HashRouter>
</React.StrictMode>,
document.getElementById('root')
);
Solution 2
You can use a trick to teach GitHub Pages to handle 404s by redirecting to your index.html page with a custom redirect parameter. You would need to add a 404.html file with the redirection code to the build folder before deploying your project, and you’ll need to add code handling the redirect parameter to index.html.
You can read more about both approaches here: https://create-react-app.dev/docs/deployment/#github-pages
I'm having issues with react url param routes and it's giving out error on amplify.
Example routes with url params
<AsyncSearchResultsList path="search/:q" />
<AsyncSearchDetailedInfo path="search/user/:id" />
This is the error I'm getting
On amplify I have these redirects setup
I can't navigate to either of these routes and it works fine for other routes without parameters
All of these routes are also working perfectly on localhost
Is there something I'm missing? I'm using Reach Router in my react project.
Update:
Figured what seemed to be part of it, the issue I was having was resolved. Amplify wasn't handling the Lazy loaded route components properly, data is flowing and the page is loading now after refactoring. But another issue came up, the page now displays blank whenever I navigate to those routes directly. I'm pretty sure it's an issue with Amplify's redirect rules. Still need help!
To those who need to use react and params
Source address
Target address
Type
Country code
</^[^.]+$|.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json|webp)$)([^.]+$)/>
/index.html
200 (Rewrite)
-
/search?customer=<customerid>
/search?customer=<customerid>
301 (Redirect - Permanent)
-
Ref: https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html#redirects-for-single-page-web-apps-spa
and
https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html#query-parameters
I have built an app that doesnt have a server. It just pulls data from a couple of endpoints.
When someone tries to access a page that isnt the root URL they receive a Page not found message.
I havent managed to find a solution to this that doesnt involve writing a server. Im really hoping that I can avoid that because the app really is too simple to need it.
When I navigate to http://url.com/nextPage it returns a Page not found, but if I navigate there from the root http://url.com/ I dont have any issues.
I have not pushed an app to production before so this was an unexpected issue, but it is also important to how the app works that users are able to access a page directly via the URL.
My App.tsx file. Both pages are just straight forward React.
import { BrowserRouter as Router, Route } from 'react-router-dom';
function App() {
return (
<Router>
<Route
path='/'
exact
component={HomePage}
/>
<Route
path='/nextPage'
component={NextPage}
/>
</Router>
)
}
Since now I know you are using Netlify as your hosting provider, there is a way to do it without having your own server. Netlify has lots of configuration, one of it being redirects.
You could try adding to your Netlify.toml the following:
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
Or, you could create a _redirects file, with the following content:
/* /index.html
Take a look at this documentation: https://www.netlify.com/blog/2019/01/16/redirect-rules-for-all-how-to-configure-redirects-for-your-static-site/
I have a website made with React running on Digital Ocean with pm2 and NGINX. The entry point "/" loads just fine but when I try to go to the "/:username" route I just get 404 Not Found. My routes are defined in App.jsx as follows:
<Switch>
<Route
exact path='/'
render={
routeProps => <Front {...routeProps} />
}
/>
<Route
path='/:username'
render={
routeProps => <Profile handleSignOut={ this.handleSignOut } {...routeProps} />
}
/>
</Switch>
index.js has the following code:
ReactDOM.render(<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
)
The routes all work as expected when running locally with npm run start.
This is a very common problem for single page apps written in different frameworks like React or Angular.
The problem, though, is irrelevant to the frameworks. It rather lies in the mechanism that is the in-browser routing. It is actually not a real routing. When you open a single page app, a simple index.html file is served, and when you navigate away inside the app, the framework takes care of rendering a new page and faking a navigation event (so that it will be recorded in the browser history and the url is changed).
But when you arrive on a subadress, like 'myapp.com/some-page', this will mke the server try and serve an actual directory called 'myapp.com/some-page', not your index.html file, which you obviously need to run the app, and, as this directory does not exist, it will throw a 404 error.
To fix this, you need to reconfigure your server, so that in case of a 404 error, instead of failing, it returns your index.html file; this way your code will be loaded and the underlying framework will handle the routing to display the correct page.
For react App hosted on app Platform on Digital Ocean.
Luckily now, you can now enable it through the UI. Please follow the steps below and it should be resolved.
Using Cloud panel UI: Log in and click on App > Settings >> click on component name > scroll down to Custom page > Edit Custom page and select Catchall > Enter index.html in the page name block > Save
Cheers,Arinze Hills
In addition to #amem nice explanation, add the following line to your web server configuration file:
For NGINX add error_page 404 /index.html;
For Apache add ErrorDocument 404 /index.html to your .htaccess
I've got some strange "behavior" of my react app - actually when I start the app and check the requests, I have one extra request on undefined with a status code of 200.
I'm using create-react-app with React Router and the route to this specific page is dynamic like this:
<Route exact path="/a/:link" component={MyComponent} />
The :link is the dynamic part of the URL. As you can see, there's no error/failure and the response status code is 200, but it's extra request I don't want to make. Have you ever had a similar problem? Thank you, guys.