I created a ReactJs application and what to be accessible only in domain.com/app.
I added this to index.js
<BrowserRouter basename='/app/'>
<App />
</BrowserRouter>
And now when I navigate between pages it works as it should (it adds /app/ properly), ex. domain.com/app/about.
But the application is still being accessible without /app, ex. when I type domain.com/about still shows the about page.
While I want it bo be accessible only with /app/, and not without it.
it seems that you have accidently added a trailing slash, which is not required.
see https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string for more details.
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 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 deployed by first react app on github pages but everything is blank except the navigation bar. However, after clicking on the navigation bar everything seems to work fine.
I also I have a path to my home page so I was wondering what's wrong. Thanks!
Try adding basename={process.env.PUBLIC_URL} to your Router component. Like this:
<BrowserRouter basename={process.env.PUBLIC_URL}>
<App />
</BrowserRouter>
This tells react router to use the full URL of your repo as the '/' of your Routes. I had the same problem you're having, and this solved it.
I am using react-router-dom#5.1.2
The project is created with a basic Create React App.
I have the below code in my index.js
<BrowserRouter basename="/login">
<App />
</BrowserRouter>
When I launch my development server, it still points to localhost:3000. Ideally, it should point to localhost:3000/login.
basename doesn't redirect, it just informs the router that there is a piece of the URL before the part of the URL that your router will read and modify.
In your routes, just add a Redirect at the bottom so if none of your other routes match, it will take you to the login page. Assuming you don't have a / route, this will accomplish what you need.
You need to specify homePage: '/login' in package.json to load this route by default.
I tried to deploy my react app which was created using create react app to,
1.nginx
2.github pages
In both instances, only the react app logo and the title is visible in the tab but nothing appears in the body of the page. (The page is blank even though the code is deployed)
Does anyone know why this happens?
This is caused if you have used the Browser Router in your react project.
Both GitHub Pages and nginx serve your app from a non-root folder (i.e. username.github.io/repo-name/) as opposed to from a root folder (i.e. username.github.io/). React Router does not consider your app's URL as a match for any of the routes defined in your app.
For example, if you define a route using <Route exact path="/" component={SomeComponent} />, React Router will see that / and /repo-name/ do not match exactly and will, thus, not render the component.
To overcome this error use base name prop in the BrowserRouter and name it according to the non-root folder name.
example:- if your app is served inside a folder named "folder1" in your server, do as follows.
Hope my answer helps someone struggling with the same issue.cheers! #iii #R2B