Hi!
I try to use react-router-dom for handling routes but I have errors with packages when I’m try to install everything that use react-route V6. If someone knows how I can use this version of react-route with meteor I will aprecciate your help. Thanks
Hi, first of all, I suppose your entire project is React based and you don’t try to integrate this router with another front-end.
Here’s an example of an entry point in your Meteor React front-end (index.js)
import App from './layouts/App' // your top React component here. Generally contains Header, Page, Footer,
async function main () {
const [
React,
ReactDOM,
{ BrowserRouter }
] = await Promise.all([
import('react'),
import('react-dom'),
import('react-router-dom')
])
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>, document.getElementById('app'))
})
}
main()
Example of App.js including dynamic imports and your router:
import React from 'react'
import loadable from '@loadable/component'
const Main = loadable(() => import('../../startup/client/routes'))
export default function App () {
return (
<div>
{/* ......Top Menu, Header, etc */}
<Main /> // this is your router
{/* ...... Footer, etc */}
</div>
)
}
Example of router with dynamic imports:
import React from 'react'
import { Route, Routes } from 'react-router-dom'
import loadable from '@loadable/component'
const Terms = loadable(() => import('../../ui/pages/others/Terms')) // these are functional components (functions such as export default function MyPage () {}
const Privacy = loadable(() => import('../../ui/pages/others/Privacy'))
const Cookies = loadable(() => import('../../ui/pages/others/Cookies'))
const Main = () => {
return (
<Routes>
<Route path='/terms' element={<Terms />} />
<Route path='/privacy' element={<Privacy />} />
<Route path='/cookies' element={<Cookies />} />
</Routes>
)
}
Example of Terms page:
import React from 'react'
export default function Terms () {
return (
<div className='container'>
These are the Terms and Conditions
</div>
)
}
1 Like
Can you post your routes here?
@copleykj @storyteller and others …
Still react-router-ssr Does not support from version 6 router
https://github.com/Meteor-Community-Packages/react-router-ssr/issues/16
Hi @carolinabdo,
I’m using react-router-dom 6.3.0 without any problems.
- What is your Meteor version?
- What is your Node version?
- Did you install it using
meteor npm install?
Can you post your routes here?
That to me looks like just a warning and my guess is the router should work fine besides displaying the error in the console. Unfortunately right now I’m very busy with client projects that keep the bills paid and I can’t prioritize work I do for free over other this work. If I get some time in the next few weeks I’ll look deeper into this and if this is merely a version check mismatch, I’ll update the check and republish the package.
If you have blocking issues that require more immediate attention I’d honestly consider sponsorship of devs that put the work into maintaining the packages that make life easier and make you money.
2 Likes
@copleykj @storyteller @filipenevola
This shows exactly why important packages should be in the core of Meteor.
Off-core packages are not really reliable and can not be relied on in the long run.
Do you want more reasons to move important packets to the kernel?
Please work so that we can trust Meteor and develop it in complete peace.
So the problem with “this should be in core” is that everything can’t be a core package. The core team must make decisions about which parts of Meteor are going to be opinionated, and which parts are going to be flexible. All of which, to some degree, come down to resources, whether it’s financial or it’s human.
At some point long ago it was decided that Meteor would not be opinionated on which view layer you have to use, and by proxy the routing layer as well. Thankfully this means that you get to choose React, Vue, Angular, Svelte, etc, etc. but that comes with the caveat that the core team isn’t going to maintain solutions for each and every one of them and instead they provide a more generic solution which can be used to create SSR for just about any view layer/router combination. Imagine core team trying to maintain a solution that worked with every combination. React alone probably has at least half a dozen routers. react-router, react-location, wouter, react-navigation just off the top of my head. That doesn’t even begin to factor in the data hydration story that probably comes into play as well. In the case of react-router-ssr and other view specific solutions, some very generous person has taken the time to implement an SSR story for you and spare you that time and effort.
Now Meteor is absolutely fantastic in so many ways, but nothing is perfect and because of that fact there is a whole host of other solutions that exist, each with their own decisions they have made about which parts of their solution are opinionated and which are flexible, which complexities they can afford to abstract away for you. Some solutions that might be of interest are Next, Nuxt, Nest, Vite, Sveltekit, Redwood, Remix. Each one will have pros and cons for you to consider. Next in particular has one of the most opinionated router/ssr solutions. This makes for a top notch developer experience for that particular pain point, but then you are left with no opinion on the data layer at all and you’ll have to figure out that part on your own. In the end you’re just making trade offs on what you have to personally write and maintain, and what open source maintainer you’re going to rely on for the particular piece that your platform of choice is lacking time, money, or talent to officially implement. If you get lucky you might find the right platform where all the pieces that it lacks have adequately supported, open source, packaged solutions, that are maintained and that you can drop in and they just work… but I’ve never found this to be totally the case.
5 Likes