React router is shit
I have never seen more retarded library.

Not only those suckers change the 100% of the API every fucking update for no reason, also they have the most fucked up documentation ever.

No search in the docs!!! Fucking bullshit examples with no such easy things like how to create nested routes.

Please, stop using this piece of shit, I'm tired of working with this fucking abomination. Hope they will delete their shit repo one day.

I also remember those stupid cocksuckers writing a blog post where they were happily introducing nested routes only inside child route's component.

Thus breaking v4 compatibility.

Now in v5 to v6 migration guide they proudly say that there is no need in that, and you can again define all routes in one place, what a perfect example of self-fuck.

My take on this is that the RR authors are business people, perhaps even more than open-source developers. These are the same people who author Remix, the SSR meta-framework for React, and now since Remix is their primary business (got funded and acquired by Shopify), their main goal is to get as many people as possible onto Remix, so basically in the last couple of major versions, they've been updating the RR library so it'll be primarily compatible with Remix, and so people would be highly encouraged to transition their client-side React stack to use Remix, if they want to keep using the RR library.

If you pass a render function to a route, React Router goes into the object representation of the returned component and adds the parameters to the props table by modifying the return value of React.createElement. If you don't have them in the types you can't use them, but if you do have them in the types you can't instantiate the component, so you need to type them as optional and assume their presence with a ! cast. I don't understand how something like this could pass in an API that was designed in 2020.

Compare this with React Navigation which offers dedicated typing support to make sure that even your query parameters are checked.

Ask chatGPT

For the longest time the "recommended" (by Facebook) way to use React Router was to have a route object which ties a path, parameters, a component and a data loader, and programmatically transform this object into whatever format the devs advocated for when your particular build was published.

@lorentz

Does React Navigation work only with React Native? What about web apps?

@retoor

"Ask chatGPT"

I've tried, even chatGPT is not possible to understand their shit documentation. It messes v5, v6 and who knows what else.

https://linkpicture.com/q/...

Btw I've drilled their shit documentation as well as useless github examples and found the only place where they explain how nested routes work in new shit version of their shit library.

It could be found only in the migration guide. Absolutely retarded.

https://reactrouter.com/en/main/...

@Argos I learned about it fairly recently, it claims to support webapps but I can't verify that it's actually viable.

imagine using a library (let alone being the people who built it) for things that can be accomplished in approximately 100 lines of native JS

@fullstackclown I'd like to see a router in 100 lines of native JS without artificially compressing it. Seriously, one of my hobbies is overoptimizing my personal website, I'm genuinely interested.

@lorentz i mean i still don't understand what one needs a 'router' for, a hrefs and links are literally natively supported in the browser. at max I sometimes use util functions like the following (could be even shorter, i need to check for window so gatsby build doesn't explode)

code:

// doesn't add to the history stack

export const redirectTo = (path: string) => {

if (typeof window !== 'undefined') {

window.location.replace(path)

}

}

// adds to the history stack

export const goTo = (path: string) => {

if (typeof window !== 'undefined') {

window.location.href = path

}

}

// resets the given search param keys to an empty string use replaceState

export const clearSearchParamsKeyValues = (keys: Array<string>): void => {

if (typeof window !== 'undefined') {

const searchParams = new URLSearchParams(window.location.search)

keys.forEach((key) => searchParams.delete(key))

window.history.replaceState({}, '', `${window.location.pathname}?${searchParams.toString()}`)

}

}

but again, perhaps i'm the 🤡 i've just never needed a router for the browser environment

now, react-navigation for native apps, that's a different story...

@fullstackclown Why use a router? Because it allows to

- preserve pagestate in React

- lazy-load and cache pages and separately decide whether to cache the data

- avoid FOUCs which become flashbangs on a dark themed website

- do all this without breaking SSR

I get the impression that your real question is "why use React", which is an entirely different discussion and you probably heard all my arguments already.

@fullstackclown

Your examples are not a router at all, just a couple of navigation functions.

If you ever try to build a web application using React that has at leas 50+ pages, some of which require authorization to be visited, some are displayed under nested routes, some use parametrized routes - you will see why it is absolutely necessary to have a routing library.

Also the big apps require lazy loading, that is technically possible to implement without a routing library, but you will not be able to efficiently manage it, especially when the app will grow larger.

nah, use nextjs or gatsby, then the file structure itself controls all that stuff

@fullstackclown

I once used next and will never do that again. Their routing was made by a person even more insane than react-router suckers

@Argos Next is kinda stupid but at least it's not a command injection vuln factory like the other examples in the picture.

At least if it's parsed the way I think it is, with the structured argument used by the router and the string written in the URL bar.

Actually nevermind, if you reload the page the routes should again be matched greedily on the current contents of the URL bar so all three of them are command injection generators.

My sole hope is that next's routing function - the only one capable of this of the three presented APIs - detects if the argument contains a / or ? and throws, but the chances are slim.