We're using react router v6 in a project, and have a potential need to store some search results filter fields in the hash fragments of the url, i.e.
/search#fn=Bob&sn=Smith&expanded=12088&active=1
I'm wondering, is there any way to do this in react router, or do I have to roll some kind of utility to generate links and then rely on vanilla js or something to read the hash fragments of the current route in react router and would I have to manually compute the links to navigate to?
So right now /search is an object based Route, and what I really want to do is be able to specify parameters that can be passed to that route via hash fragments so that when I use something like the useParams hook I can see them?
I really want to make all the search criteria deep linkable but I don't really want to have a route like "/search/Bob/Smith/expanded/1208" or some craziness like that.
Or maybe the answer is to do something janky like this?
/search/fn=Bob&ln=Smith&expanded=12088&active=1
Related
Let's say I have a blog and it's a normal Express multipage app. Now I would like to have a blog content manager as SPA with Vue.js.
I want to serve this app from a single route e.g. https://myapp/admin/dashboard
while the rest is a plain multipage express app (same server).
How to setup something like this in express and vue?
There are three possible strategies:
either you serve everything under a common path to the SPA with something like
app.get("/spa/*", spa);
app.get("/spa", spa);
In this case the client-side app will have to know its prefix because it will have to prefix all its links, ie it will have to send you to /spa when it wants to send you home. Both Vue and React Router support this via an option.
either you use URL fragments, ie hash links of the form /spa#sublink
In this case Express sees a single route:
app.get("/spa", spa);
The application doesn't need to know its prefix, you can relocate it, it always sends you to a relative link like href="#sublink. The downside is that you can't have multiple levels.
or you use query arguments like /spa?item=sublink
This is probably the worst way to do it, since it combines the downsides of all other methods
If you are not sure, the second method is probably the way to go - it doesn't require any special setup.
I use svelte-spa-router npm module for the router of my svelte project.
When using this module it adds "#" in the URL in default to denote it is the spa router.
Such as "localhost:5000/#/app/.." I want to remove this "#" and make the router as the whole router such as "localhost:5000/app" Could anybody help me with this, please?
This is not possible with svelte-spa-router. This package is a hash-based router, and the "#" is key to how this type of router works. From the package docs:
With hash-based routing, navigation is possible thanks to storing the current view in the part of the URL after #, called "hash" or "fragment".
For example, if your SPA is in a static file called index.html, your URLs for navigating within the app look something like index.html#/profile, index.html#/book/42, etc. (The index.html part can usually be omitted for the index file, so you can just create URLs that look like http://example.com/#/profile).
When I created this component, other routers for Svelte 3 implemented navigation using the HTML5 history API. While those URLs look nicer (e.g. you can actually navigate to http://example.com/profile), they are not ideal for static Single Page Applications. In order for users to be able to share links or even just refresh the page, you are required to have a server on the backend processing the request, and building fully-static apps is much harder as a consequence.
Hash-based routing is simpler, works well even without a server, and it's generally better suited for static SPAs, especially when SEO isn't a concern, as is the case when the app requires authentication. Many popular apps use hash-based routing, including GMail!
If you want your URL to not have a "#", you will need to switch to a HTML5 history-based router such as svelte-routing or routify.
I have always wondered how can I do this..
if you go https://community.nodebb.org/topic/14103/strange-thing-on-this-forum
It shows a thread in a forum.
But you can actually access to that same page with https://community.nodebb.org/topic/14103
and then this url changes to the 1st one above.
How can I do this in Node.js?
Node itself is just the language, what you're asking about happens in a framework, like Express.
In Express (and most other frameworks) you can define routes based on either strings, symbols, or a regex. In your above example, the route definition is likely looking for topic/:id and also set to accept anything put after the ID.
Look at the basics of Routing in Express to see how this works.
I'm currently using express to handle client request. At one point I need to handle get request if user loads any page of my app. So, I want all the routes to be configured at some place.
For example:
"/about"
"/contact"
"/listing"
"/product"
Above there are multiple routes and for each route I need to write app.get('/about', handler)..like this. So rather then writing multiple get handlers I want to use these path dynamically.
Is there a best way which I can use to store all the route path at one place (not DB) and can read from there only. Currently I am thinking to use JSON where I will store all the path with method type, params etc.
Also please validate is this a correct approach to handle such things or any better way or any node module.
It's common practice to write different methods for each route.
This makes sense since you'll want to return something different for /about than for /contact.
To organise this in a scalable manner you should create different files for each route. You can look at this official Express.js example.
I have recently started learning React and am trying to make a simple blogging app. I store the data (post content, comments etc.) in MongoDB and would like to render the content according to the route, such as, when I have a certain URL (like /blog/:username), I'd pull data from the database and then render a view with the data content.
Using Express, I am now using static html files ( express.static) as the view, yet this makes it impossible to render the content according to the requested route, such as:
/blog/:username/:article
It is possible with a template engine, like Jade, but Jade, as far as I know, does not work with React.
What is the correct way to make dynamic views using React while preserving the URL route structure?
Thank you
Generally speaking, there are several ways to achieve your goal. I'll sketch the one that I feel is the most natural approach when using React:
Create your blogging app with React
Use a frontend routing mechanism such as react-router to make React aware of the URL
Either fetch the data for each blog entry from the backend via an Ajax call each time the user hits a URL, or store the blog entry data in the frontend (e.g. using something like redux) and reuse it when required.
Does this make sense? If not, please keep asking...