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.
Related
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} />
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
I am using react router v4. I noticed the same problem in v2 as well:
If I am at some route
/admin/details
and I do a page refresh, the root path of my app is changed to /admin. So any static assets loaded in index.html are missing because /admin is appended to the root path.
Same thing goes for api requests. If i want to make a relative API request from a nested route component, it breaks because rather than calling for example a get('data/images') it would doget('admin/data/images').
Any way around this? I've googled all day and nobody seems to run into this problem, the only answer is absolute paths for the requests.
I figured it out. I was calling my endpoint with a relative path ie I did
get('data/all') instead of get('/data/all') ...same thing with my scripts in the html. I just made them absolute and its all working. Sillyness.
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