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>
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.
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
So I have began my project as a React single page application. But it turns out it would be more convenient to have a basic back-end for rendering the pages and have a real routing.
Plus I have some variables that need to be accessible from all pages, and putting them as props to all the components is really heavy. So sending them with the pages could be a solution.
So I added Express, and I can now render a basic HTML page with it.
But I don't know how I am going to link my react component to this html file. Or pass it the needed variables.
I used react-router-dom but it doesn't support page refreshing. And it doesn't help with having global variables needing to be accessible from all components.
Here in my index.js you can see how I render my basic html file, and also at the end and commented, how my react component was rendered before adding express.
app.use(express.static('public'));
router.get('/', function(req, res, next) {
res.sendFile('./public/views/loginView.html' , { root : __dirname});
});
app.use(router);
app.listen('8080');
// const wrapper = document.getElementById("app");
// wrapper ? ReactDOM.render(<App />, wrapper) : false;
Here my loginView.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<!-- links and scripts -->
<title>The login page</title>
</head>
<body>
<div id="app">
content
</div>
</body>
</html>
Is there a simple way to link my html file with its react component and render it ?
If not, is there another way to make some variables (which are not constants) accessible from every react component (maybe react-redux) ?
So with React you want to create a production ready bundle. This normally involves splitting the bundle up so you aren't serving a 5+Mb file to the user to download (using 4G for example with poor connection would take too long) and minifying and uglifying the code (so no one steals your code). These bundled javascript files would then be hosted on your server with reference to them in the HTML file.
The express app would then go along the lines off any route just display the HTML file e.g. router.get('*', (req, res) => res.send('index.html)).
I would recommend using webpack to create the bundle as it helps with the splitting and minifying etc. Take a look at webpack for development and production aswell as create-react-app for quick project setup.
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