This document discusses React routing and data fetching techniques. It provides examples of route configuration with names, paths, and components. It also shows how to fetch data asynchronously when route changes occur and prior to component rendering. Async data is fetched using a custom data fetcher function and promises to resolve the data before setting the previous location to null.

1. React
and
7.5M Daily Users
@solilokiam
Miquel Company

2. sites
7
Daily Users
7.5M
Daily Requests
133M
served/month
8500TB+
hours of video/day
30000+
Videos
600000+

5. We are always looking for
New Talent…

6. Join us @kodify.io

7. 1 year ago

8. 1 year ago

9. Lessons Learned
Routing
SEO
Asset Management
Error Handling Logging
Styling
User Tracking
Session handling Caching
State ManagementSecurity
Code Splitting
Server side Rendering
Styling
Animations

12. Routing

13. Routing

14. Routing
{
name: 'home',
path: '/',
component: bundle.Home,
fetchData: dataFetcher.fetchHomeData,
},

15. Routing
{
name: 'favourites',
path: '/users/:username/favourites',
component: bundle.Favorites,
requireAuth: true,
},

16. Routing
<Link
to="video_listing"
params={{ sort: 'views', time: 'month' }}
>
...
</Link>

17. Routing
<a href="/videos?sort=rating&time=month">
...
</a>

18. Data Fetching

19. Data Fetching
<Router
{...this.props}
routes={routes}
onUpdate={this.fetchData}
/>

22. Async Data Fetcher
render() {
const { children, location } = this.props;
const { previousLocation } = this.state;
return (
<Route
location={previousLocation || location}
render={() => children}
/>
);
}

23. Async Data Fetcher
componentWillReceiveProps(nextProps) {
const nextLoc = nextProps.location;
if (this.hasNavigated(nextLoc)) {
this.setState({
previousLocation: this.props.location,
});
this.loadAsyncData(nextProps.location);
}
}

24. Async Data Fetcher
loadAsyncData(location) {
const { match, route } = routeMatcher(location.pathname, routes);
const { queryParams } = routeParamsExtractor(location);
asyncDataFetcher(
route.fetchData,
this.getStore(),
Object.assign(match.params, queryParams),
).then(() => {
this.setState({
previousLocation: null,
});
})
}

25. Thanks
@solilokiam
https://beta.porntube.com