universal-router - A simple middleware-style router for isomorphic JavaScript web apps

  •        111

A simple middleware-style router that can be used in both client-side (e.g. React, Vue.js) and server-side applications (e.g. Node.js/Express, Koa).Play with an example on JSFiddle, CodePen, JS Bin in your browser or try RunKit node.js playground.

https://www.kriasoft.com/universal-router/
https://github.com/kriasoft/universal-router

Dependencies:

path-to-regexp : ^2.1.0

Tags
Implementation
License
Platform

   




Related Projects

isomorphic-flux-boilerplate - ES7 Isomorphic Flux/ReactJS Boilerplate

  •    Javascript

A wonderfull boilerplate for Flux/ReactJS universal applications, running on koajs. Koa will be our server for the server side rendering, we use alt for our Flux architecture and react-router for routing in our app.

react-router-server - Server Side Rendering library for React Router v4.

  •    Javascript

Server Side Rendering library for React Router v4. If anyone is interested in taking over this project please let me know.

After.js - Next.js-like framework for server-rendered React apps built with React Router 4

  •    Javascript

Next.js is awesome. However, its routing system isn't for me. IMHO React Router 4 is a better foundation upon which such a framework should be built. Routes are just components and don't / should not have anything to do with folder structure. Static route configs are fine.

reactql - Universal React+GraphQL starter kit: React 16, Apollo 2, Webpack 4, Styled Components 4, React Router 4, PostCSS, SSR

  •    TypeScript

Universal front-end React + GraphQL starter kit, written in Typescript. Hot code reloading. Make a change anywhere in your code base (outside of the Webpack config), and changes will be pushed down the browser automatically - without page reloads. This happens for React, Styled Components, SASS - pretty much anything.

react-server-routing-example - An example using universal client/server routing and data in React with AWS DynamoDB

  •    Javascript

A simple (no compile) example of how to do universal server/browser rendering, routing and data fetching with React and AWS DynamoDB for fast page loads, and search-engine-friendly progressively-enhanced pages.Also known as isomorphic, this approach shares as much browser and server code as possible and allows single-page apps to also render on the server. All React components, as well as router.js and db.js are shared (using browserify) and data fetching needs are declared statically on each component.


rendora - dynamic server-side rendering using headless Chrome to effortlessly solve the SEO problem for modern javascript websites

  •    Go

Rendora can be seen as a reverse HTTP proxy server sitting between your backend server (e.g. Node.js/Express.js, Python/Django, etc...) and potentially your frontend proxy server (e.g. nginx, traefik, apache, etc...) or even directly to the outside world that does actually nothing but transporting requests and responses as they are except when it detects whitelisted requests according to the config. In that case, Rendora instructs a headless Chrome instance to request and render the corresponding page and then return the server-side rendered page back to the client (i.e. the frontend proxy server or the outside world). This simple functionality makes Rendora a powerful dynamic renderer without actually changing anything in both frontend and backend code. Dynamic rendering means that the server provides server-side rendered HTML to web crawlers such as GoogleBot and BingBot and at the same time provides the typical initial HTML to normal users in order to be rendered at the client side. Dynamic rendering is meant to improve SEO for websites written in modern javascript frameworks like React, Vue, Angular, etc...

Next.js - Framework for server-rendered or statically-exported React apps

  •    Javascript

Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.

react-engine - a composite render engine for universal (isomorphic) express apps to render both plain react views and react-router views

  •    Javascript

Pass in a JavaScript object as options to the react-engine's server engine create method. The options object should contain the mandatory routes property with the route definition.routesFilePath: <String> - path for the file that contains the react router routes. react-engine uses this behind the scenes to reload the routes file in cases where express's app property view cache is false, this way you don't need to restart the server every time a change is made in the view files or routes file.

loadable-components - React code splitting made easy ✂️✨

  •    Javascript

React code splitting made easy. Reduce your bundle size without stress ✂️✨. Webpack allows modern code splitting via the dynamic import syntax. Loadable Components makes it possible to use that awesome feature with React. It is compatible with react-router and server side rendering. The API is designed to be as simple as possible to avoid useless complexity and boilerplate.

redux-router - Redux bindings for React Router – keep your router state inside your Redux store

  •    Javascript

Redux bindings for React Router. React Router is a fantastic routing library, but one downside is that it abstracts away a very crucial piece of application state — the current route! This abstraction is super useful for route matching and rendering, but the API for interacting with the router to 1) trigger transitions and 2) react to state changes within the component lifecycle leaves something to be desired.

reactGo - Your One-Stop solution for a full-stack universal Redux App!

  •    Javascript

Redux Predictive state containers. Server-side rendering with React Router 3.x. Having server-side rendering allows you to pre-render the initial state of your components when a user (or search engine crawler) requests a page.

react-native-redux-router - React Native Router using Redux architecture

  •    Javascript

I've decided to stop supporting this component in favor to new release react-native-router-flux (https://github.com/aksonov/react-native-router-flux). The new version doesn't depend from concrete Flux/Redux implementation and allow you to build nested navigators easily. Also it allows to intercept route 'actions' from your store(s).

react-isomorphic-video-game-search - An Isomorphic application demo powered by React, reflux, react-router-component, express, superagent and the Giant Bomb API

  •    Javascript

An Isomorphic application demo powered by React, reflux, react-router-component, express, superagent and the Giant Bomb API. An excuse to share my research and get feedback as I prepare to launch a large React-powered app.

react-router-component - Declarative router component for React.

  •    Javascript

React router component allows you to define routes in your React application in a declarative manner, directly as a part of your component hierarchy. Having routes defined as a part of your component hierarchy allows to dynamically reconfigure routing based on your application state. For example you can return a different set of allowed locations for anonymous and signed-in users.

found - Extensible route-based routing for React applications

  •    Javascript

Extensible route-based routing for React applications. Found is a router for React applications with a focus on power and extensibility. Found uses static route configurations. This enables efficient code splitting and data fetching with nested routes. Found also offers extensive control over indicating those loading states, even for routes with code bundles that have not yet been downloaded.

react-server-example - A simple example of how to do server-side rendering with React (no compilation needed)

  •    Javascript

A simple (no compile) example of how to do server-side rendering with the React library so that component code can be shared between server and browser, as well as getting fast initial page loads and search-engine-friendly pages.A more complex example with shared routing and data fetching can be found at react-server-routing-example.

react-app - Create React apps with server-side rendering and no build configuration

  •    Javascript

Then open http://localhost:3000/ to see your app. When you’re ready to deploy to production, create a minified bundle with npm run build.

example-react-router-server-rendering-lazy-routes

  •    Javascript

React Router has two great features that seem like they might not work well together: server side rendering and code splitting. This minimal demo shows how to get the benefits of server rendering and partial app loading with lazy routes and webpack's code splitting.