![Create React App Officially Deprecated Amid React 19 Compatibility Issues](https://cdn.sanity.io/images/cgdhsj6q/production/04fa08cf844d798abc0e1a6391c129363cc7e2ab-1024x1024.webp?w=400&fit=max&auto=format)
Security News
Create React App Officially Deprecated Amid React 19 Compatibility Issues
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
react-resource-router
Advanced tools
Configuration driven routing solution for React that manages SPA route matching, data fetching and progressive rendering
React Resource Router (RRR) is a configuration driven routing solution for React that manages single page application route matching, data fetching and progressive rendering.
React Resource Router was developed by Atlassian for Jira primarily to improve performance and prepare for compatibility with React's forthcoming Concurrent Mode on both client and server. You can read more about its development and impact here.
path
- the path to matchcomponent
- the component to renderresources
- an array of objects containing fetch functions that request the route component's dataResources describe and provide the data required for your route. This data is safely stored and accessed via the useResource
hook or ResourceSubscriber
component.
import { createResource } from 'react-resource-router/resources';
import { fetch } from '../common/utils';
export const homeResource = createResource({
type: 'HOME',
getKey: () => 'home-resource-key',
getData: () => fetch('https://my-api.com/home'),
});
export const aboutResource = createResource({
type: 'ABOUT',
getKey: () => 'about-resource-key',
getData: () => fetch('https://my-api.com/about'),
});
These are the React components that get rendered for your routes. As mentioned, they can be wired into the state of your resources via the useResource
hook or ResourceSubscriber
component.
import { useResource } from 'react-resource-router/resources';
import { aboutResource, homeResource } from '../routes/resources';
import { Loading, Error } from './common';
export const Home = () => {
const { data, loading, error } = useResource(homeResource);
if (error) {
return <Error error={error} />;
}
if (loading) {
return <Loading />;
}
return <div>{data.home.content}</div>;
};
export const About = () => {
const { data, loading, error } = useResource(aboutResource);
if (error) {
return <Error error={error} />;
}
if (loading) {
return <Loading />;
}
return <div>{data.about.content}</div>;
};
Your route configuration is the single source of truth for your application's routing concerns.
import { Home, About } from '../components';
import { homeResource, aboutResource } from './resources';
export const appRoutes = [
{
name: 'home',
path: '/',
exact: true,
component: Home,
resources: [homeResource],
},
{
name: 'about',
path: '/about',
exact: true,
component: About,
resources: [aboutResource],
},
];
Now that you've set up your resources, components and configuration correctly, all you need to do is mount the Router in your react tree with a RouteComponent
as a child. It will do the rest!
import {
Router,
RouteComponent,
createBrowserHistory,
} from 'react-resource-router';
import { createResourcesPlugin } from 'react-resource-router/resources';
import { appRoutes } from './routing/routes';
const history = createBrowserHistory();
const resourcesPlugin = createResourcesPlugin({});
const App = () => (
<Router routes={appRoutes} history={history} plugins={[resourcesPlugin]}>
<RouteComponent />
</Router>
);
npm install react-resource-router
# or
yarn add react-resource-router
Check the docs website or the docs folder.
You can checkout the repo and play around with the examples we have setup to demonstrate how the API can be used for various use cases.
npm start
Big thanks to Thinkmill for their involvement in this project.
Copyright (c) 2020 Atlassian and others. Apache 2.0 licensed, see LICENSE file.
FAQs
Configuration driven routing solution for React that manages SPA route matching, data fetching and progressive rendering
The npm package react-resource-router receives a total of 652 weekly downloads. As such, react-resource-router popularity was classified as not popular.
We found that react-resource-router demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.