search

artem-malko / react-ssr-template

Simple template for a website with a brand new SSR streaming API from React 18
http://174.138.13.187:5000
MIT License
69 stars 5 forks source link

QUESTION: Why didn't you use React Router #5

Open ahmetkuslular opened 1 year ago

ahmetkuslular commented 1 year ago

Why didn't you use React Router? This is the first time I've seen a React project without React Router. 😅

artem-malko commented 1 year ago

Hi, thanks a lot for your question)

First of I have to say, React Router is a great project. But there several problems. Or there were several problems, cause now it has version number six. But the last time, when I was looking on it — it was 5 alpha or something)

So, problems.

  1. React router unsafe!

Let's imagine you have such Route:

<Route path="/user/:id" element={<User />}>

If you follows the docs of React router, you have to do something like this to get that id param:

function User() {
  const params = useParams();
  const userId = params.id;
  ...
}

But, you have no idea, if id is really existed? Or you could mistype like const userId = params.ib; — and there is no warnings, no errors =)

Yeah, v6 has useMatch, but it is so strange, that you have to copy the path from <Route /> to component inside it. But yes, it's much safer.

In my project you have quite strong types (https://github.com/artem-malko/react-ssr-template/blob/main/src/application/pages/shared.ts#L44C3-L46C3) You just can not apply newsItemPageRouteConfig if it does not satisfy '/news/:id'.

And it was just one example of type problem)

  1. Loader concept

Actually, it is not bad idea, but IMHO quite strange limitation. I can't understand the idea, that every Route can have only one source of data. Especially when we have suspense and react-query, which works pretty ok with it.

  1. How to navigate safely?

To open another page by using imperative API like navigate from useNavigate, or <Link /> I have to develop a specific storage for all of my supported URLs.

  1. The speed

It's not so important, but just a nice bonus)

Actually, I'd like to discuss it, if you have an experience with React Router, especially with v6.

artem-malko commented 1 year ago

Oh, I forgot about one important thing. React Router v5 doesn't support renderToPipepableStream. It was a huge blocker for me

ahmetkuslular commented 1 year ago

I actually haven't had any experience with React Router v6. Currently, I'm working on a legacy project and essentially rewriting it. Since it's going to be a large and complex project, it sometimes makes more sense to lean on reliable packages. However, I haven't had the chance to dive deep into the structure of this template, so I wanted to ask you about your preferences :)

It's good to learn that v5 doesn't support renderToPipeableStream, which is beneficial for me. I was considering using v6 in the new project. I think it would make sense to do some research and conduct some experiments here.

Thank you very much for your response

artem-malko commented 1 year ago

@ahmetkuslular I have to correct myself, v5 had some problems with renderToPipeableStream on the alpha stage) May be they've done something and now it works) But other points are still valid, even for v6.

But, React Router has a big advantage — the community, which can help you with problems and questions.