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
Related
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.
so I've got a React app being served by Nginx and it uses an API server backend to which the NGINX server forwards requests, which is consumed by the React App. The react app uses the React Router package for routing.
Most of the react app is pretty simple, when you go to a specific page, it mounts a React Component which fetches some data from the API Server, and then updates itself to display that data. In doing so, it also updates the Document Title and other metadata related to the data that was fetched.
The react app is just a basic Create-React-App scaffolded application and the NGINX config is just pointing and the default index.html (which in turn loads the javascript chunks etc, standard React infrastructure).
I have a problem now where the app generally works well but if you copy a link from the app and paste it to someone, it will always show the base title of the application, and indeed if you preview the HTML source of any page on the webapp, it will always show the base title.
Here is an example (although SO doesn't do metadata link previews afaik):
https://bugwalker.io/bugs/92
My guess is that the requests that fetch metadata for a link, or fetch source page, don't have Javascript enabled and as a result it never mounts the react components and never gets to update the title etc.
Is there a way to fetch the metadata to populate the title and other metadata even when javascript is disabled? Or is there something else going on that I am completely missing?
Thanks in advance!
For this you need react helmet: https://github.com/nfl/react-helmet. On each page of your React application you should specify the title like so:
<Helmet>
<title>Some Page</title>
</Helmet>
we have some wrapped up SPA react application, we need to host it inside another react application landing page as well as many other stand alone react applications, what is the best way to achieve such behavior?
I'm currently working in a multi-language application with Next.js that I intend to host in an S3 bucket.
In this site, I need to maintain an application state across routes, by doing client-side routing from one route to another.
Since I need to support 40+ languages and internationalization, the process to do so is the following:
In next.config.js, use exportPathMap to generate /[language] routes with a variable inside "query" that contains that particular locale for the language.
Load this locale in getInitialProps of _app and pass it down with a Provider, to be consumed in any part of the application using the context API.
To support client-side routing, I've wrapped the next/link component in a custom Link that passes down all props and sets the "as" prop to "/[language]/[route]".
This solution works for now, but ideally, I wouldn't need to "mock" the routing with the "as" prop. I have found that dynamic routing in next does not allow client-side routing in a way to avoid refreshing the page to a new .html file that matches the dynamic path.
E.g:
Using the following directory structure:
/pages
index.tsx
/[lang]/
home.tsx
dashboard.tsx
From index.tsx, clicking on a link from next/link that redirects to /en/dashboard will trigger a request to the server and refresh the page completely. Thus, losing the client state.
Is there a better solution for this? It seems like a very common problem to solve, yet I cannot find an elegant solution using Next.js.
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