Comments (13)
It's unlikely to be a feature of preact-router
itself, but I'd be happy to provide examples and recommended ways to do this. The simplest way is to use a compositional component like <SplitPoint />
as a child of the router:
<Router>
<SplitPoint path="/" load={require('bundle?lazy!./home')} />
<SplitPoint path="/user" load={require('bundle?lazy!./users')} />
<SplitPoint path="/users/:user" load={require('bundle?lazy!./users/user')} />
<SplitPoint default load={require('bundle?lazy!./not-found')} />
</Router>
from preact-router.
yup! you can pass any URL to the router and it will render the correct children accordingly:
import { h, Component } from 'preact';
import renderToString from 'preact-render-to-string';
// example app (it just needs to accept a url prop):
class MyApp extends Component {
render({ url }) {
return (
<Router url={url}>
<Home path="/" />
</Router>
);
}
}
// example: express
app.get( (req, res) => {
let html = renderToString(<MyApp url={req.url} />);
res.send(html);
});
from preact-router.
There isn't one yet, but that sounds like a good idea! I don't do much server rendering since I like to deploy all my stuff to a CDN, but there are lots of people who want it. Perhaps a clone of preact-boilerplate that does SSR and shows how Code Splitting works would be ideal. The code splitting could be in both, really.
from preact-router.
No, I just don't know of an existing way of doing it cleanly. I guess the underlying reason would be that typically external stylesheets are created via ExtractTextPlugin in Webpack, and that plugin only supports extracting to a single external stylesheet.
from preact-router.
from preact-router.
from preact-router.
from preact-router.
@developit I was trying to add code splitting too for js and css too.
from preact-router.
Code splitting for CSS is super tricky. I'm not aware of any great ways of doing that with Webpack currently. Usually you have to decide between loading all your CSS at once, or loading initial CSS but pushing less-used CSS into your lazy-loaded JavaScript modules.
from preact-router.
is it for the css order issue? I was about to try the second option.
from preact-router.
Code splitting can be easily done once #135 is resolved.
from preact-router.
for code splitting and lazyloading components please visit
https://github.com/prateekbh/preact-async-route
can we close the issue @developit
from preact-router.
Yup yup! Happy to close now that we have a great lib for this :)
from preact-router.
Related Issues (20)
- Router and context question HOT 9
- Preact equivalent of useLocation in react router dom HOT 1
- bug: type conflict in preact-router after preactjs/preact#3747
- Doesn't work in "without a build step workflow" HOT 2
- Router breaks HMR with @preact/preset-vite
- Links missing a leading slash trigger a page reload
- Can't understand how get typescript work with route params HOT 4
- wrapper or event that can mute Router#1 temporarily HOT 1
- Unwanted css files are shared between multiple routes HOT 1
- TypeScript error "Could not find a declaration file for module preact-router" HOT 2
- Could not find a declaration file for module 'preact-router' HOT 2
- Does not work on Vercel HOT 3
- Accessing the link from the router directly on after Parcel build is not working HOT 1
- Allow URL change but block routing HOT 2
- Typescript type for Match props passed to children
- route() does not routing anywhere HOT 1
- Type definition doesn't allow function to be passed into `<Match />` `children`.
- preact-router not resolving route with params after refresh HOT 1
- Standard Element.matches API overridden on router element HOT 3
- Missing documentation for some functions
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from preact-router.