I am a meteor user and I want to know the difference between express and react router Dom. When I used meteor, I would render a component that contained the browser router and routes. But I am kind of confused why people are using express with react when they can use react router Dom. Is it a preference thing or is there benefits to one that the other does not have? Or am I just wrong and they are two separate things? Please explain the difference of the two and how they would be used differently.
Express
Express works on the server-side. Specifically, it runs on top of node.js
Express is a 'web application framework', and can handle routes, accept client requests, retrieve data from databases, prepare views and send back responses.
Note once again that all of that is on the server side.
React-router-dom
React-router-dom is a client side routing library.
You might be aware that in Single Page Applications, when a user navigates to a link, a request to the server is typically not sent. Instead, the client side router (like react-router-dom) interprets the request and show appropriate content (eg: a specific react component).
To answer your question why people use express with react could be
to serve your index.html and your bundle.js files, when a user first visits the site, (www.example.com)
to redirect the user to www.example.com when someone directly visits www.example.com/subpage, which is typically handled by react-router-dom on the client,
to serve static assets like icons and images on your page
as an API backend for getting data from the server, etc
Related
What is the need of showing different URL path in react application, I can display all the react component conditionally on same URL path
What is the need of showing different URL path in react application, I
can display all the react component conditionally on same URL path
While you could render a single React app component that conditionally renders dynamic content without using the URL path, using routing/navigation libraries like react-router allow the app to do this conditional content rendering based on the URL. In other words, instead of using internal conditions to render dynamic content the app is using the URL.
React apps are essentially Single Page Apps (SPAs), meaning when the React app is hosted on a server only the single root index.html file is requested and sent over the wire.
A single-page application (SPA) is a web application or website that
interacts with the user by dynamically rewriting the current web page
with new data from the web server, instead of the default method of a
web browser loading entire new pages. The goal is faster transitions
that make the website feel more like a native app.
Using different URL paths in the browser's address bar is an easy way to let the React app know what "page" the user is really trying to access. If all the user enters is "https://yourDomain.com/app" where the app is hosted, then how would they get to any specific page after the initial page load other than navigating there via the app's navigation? The URL path is what allows direct navigation via a browser, e.g. "https://yourDomain.com/app/login".
If I did understand you right you mean the use of different URLs on the same website for different pages of your website. If thats the case you want to use a libary for routing. I personally like React-Router-Dom, there is great documentation on online pages and Youtube. Just search vor react-router-dom v6.
You can add it like so: npm install react-router-dom
if not, please elaborate your question further
In my Next.js application, I'm having the well-known problem of being able to navigate via <Link> to dynamic routes, but when I refresh that page, I get a 404 error since the page was rendered client-side. The app is serverless, so a custom server isn't an option, and the paths I need can indeed be fetched from an API, but that API requires token authentication first so I can't populate the paths I need to pre-render with getStaticPaths either. This app is dynamic, and the pages I'm trying to access through dynamic routes use a lot of Client-Side Rendering anyways, so I don't have a problem with pushing rendering over to the client. I just need to know how to do that if that's the solution, and those two solutions (custom server and getStaticPaths) are the only two I've been able to find.
EDIT: I also use next export to deploy.
How is the routing done, is it with react router on the client side? An explanation about how routing is done in the mern stack would be awesome to read!
With the MERN stack you use the client side routing to render different components or different groups of components. For example, you could have a route called "/admin" that renders an admin GUI built from your React components. But these components still aren't by default loaded with any data. They would get that data by making Javascript fetch requests to the server with calls like, for example GET "/api/users" or GET "/api/roles". These latter endpoints would be managed by your server side router.
I am exploring server-side rendering of React using Dot Net. I found out that we need 2 separate JS files for server-side rendering. One for client side and one for server side. I don't understand the reason.
1-we want to make sure that we never ever import any server side code into any file that will be eventually sent out to the browser. the reason for that, we might mistakenly leak an API key or some very sensitive data.
2-In client-side and server-side routing is handled differently. We will use the StaticRouter on the server. It is specifically made for use on the server side rendering. When we do the initial render of the app, it is going to be using the static router. When our application gets shipped down to the browser and it gets rendered a second time or hydrated on the browser, we will swap out to using the browserRouter instead. Browser router has the ability to look at the URL but StaticRouter needs to be told manually.
import { StaticRouter } from "react-router-dom";
<StaticRouter location={req.path} context={{}}>
3-configuration of redux is different. In server side, before we ship down our pages to browser, we need to make sure all the data fetch is complete, our components gets its data to be rendered.
4-By keeping client-side and server-side code separate, in the future we can switch our front-end framework or server-side easily.
I had an issue that the react js app with browser history only working on normal. But after build with webpack, i had an issue with refresh or paste relative url. If i'm using hash history instead of browser history it works well. I used several methods, but i'm only getting the issue
Mostly says this is a problem of tomcat server not webpack; If any one know to solve this issue please give a valid answers.
Note: I don't wanna use hash history, it's ugly for urls
You should only use browser history if you have a backend server supporting your application with routes.
If you're using webpack-dev-server (or any other) on a fully client side app you should use hash history
If you're using react-router v4 they are both accessible by BrowserRouter and HashRouter components.