I have a react app published on github pages, my hompage and repository is /websiteName so it's working when I'm at the hompage, ex: username.github.io/websiteName. But I also have a route which is /user/:id, so when I click a link it will redirect me to username.github.io/user/123 thus giving me a 404 error. So how do I fix the 404 error when redirecting to a different route other than /websiteName.
Edit
I now added hash router, but when I click a Link with a path of /user/:id, it redirects me to https://username.github.io/websiteName/#/user/123. Then it gives me a blank page.
<HashRouter>
<Route exact path="/" component={User} />
<Route path="/user/:slug" component={Info} />
</HashRouter>
when I add a basename of /websiteName I get double slashes because my homepage name on package.json
Related
I am trying to fix a button in a NextJS app that is inside of the authentication. The app does not use pages for authenticated routes, everything is /# and I am trying to figure out how to route the Settings component from a button. The original developer did not want to have any page paths in authentication.
Is there a process like in React, such that I can route to a component not page?
<Router>
<Switch>
<Route path='/settings'>
<Settings />
</Route>
</Switch>
<Router>
I feel like withRouter might be the key, but I cannot find the path I need to the component.
I think that you approch Is not the best for a nextjs app.
Anyway you can disable the nextjs file system routing in nextjs config and use a custom server
module.exports = {
useFileSystemPublicRoutes: false,
}
Then you can use the react-router component.
Take a look at this tutorial to see a more detailed example.
Hello and thanks in advance for any feedback.
I am building out an app with React Router 6 with several nested routes.
The issue that I keep running into is that on-page refresh the router navigates back to the base route...
meaning if I am on /about and hit refresh - the App is going to navigate back to the '/' URL.
It may be worth adding that if I click on <- back or forward -> browser buttons the app behaves as expected and navigates to the previous URL.
This is obviously less than ideal.
I know the question is a bit old but to avoid the navigation to / on refresh, you could use <Link> which react-router-dom provides.
App.jsx
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About/>} />
</Routes>
Login
So, user when he click on login button, he schould be redirected to loginpage which is inside of subfolder in src, imported file in app.js, and given above code in the localhost its showing like this http://localhost:3000/LoginPage.js but not redirecting
install react-router-dom on your client using: npm i --save react-router-dom
Try this:
import { Link} from "react-router-dom";
..............................
...........................
<button>
<Link to="/login">
Login
</Link>
</button>
............................
.....................
Make sure to have this in your main App.js component:
<Route exact path="/login" component={Login} />
When I press the back button in my app, a second root component gets created. Any ideas? Thanks.
var history = require('history/lib/createBrowserHistory');
<Router history={history()}>
<Route path='/' component={App}>
<Route .../>
<Route .../>
<Route .../>
</Route>
</Route>
The problem turned out to be that Turbolinks was enabled. Since my app is SPA throughout, I just removed //= require turbolinks from my application.js.
I had a similar problem. I solved it by disabling cache for turbolinks.
<head>
...
<meta name="turbolinks-cache-control" content="no-cache">
</head>
document are here: https://github.com/turbolinks/turbolinks#opting-out-of-caching
I think turbolinks load the cached js files and then load the fetched js files, which may cause your react component to render twice
I'm not having any luck getting this to work. I've tried several configurations, as described here, here and here, but no matter what I do, page refreshes all end up with a 404. If I put <my_base>/#/myPage into my browser's URL bar, the page loads as expected, and the '/#' disappears. Then, if I try to reload, I get a 404. My setup is a single-page Angular web app: index.html has a single element that is the app's directive; this template has a navbar and an ng-view element that routes to the various pages.
According to sysadmin, Apache's AllowOverride value is set to "None", which means that .htaccess files "won't work."