# react router tutorial

Published articles for react router tutorial.

This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles.

## React Router 7: Descendant Routes

DevFeed: [React Router 7: Descendant Routes](<https://devfeed.tech/articles/react-router-7-descendant-routes-18967.md>)

Original publisher: [Read original article](<https://www.robinwieruch.de/react-router-descendant-routes/>)

Author: Robin Wieruch

Published: 2025-01-06T05:52:53Z

Content type: tutorial

Language: en

Sources: [Robin Wieruch](<https://devfeed.tech/sources/robin-wieruch.md>)

Topics: [React Router](<https://devfeed.tech/topics/react-router.md>), [Tutorial](<https://devfeed.tech/topics/tutorial.md>), [React](<https://devfeed.tech/topics/react.md>)

Tags: [react](<https://devfeed.tech/tags/react.md>), [react-router](<https://devfeed.tech/tags/react-router.md>), [react-router-7](<https://devfeed.tech/tags/react-router-7.md>), [react-router-descendant-routes](<https://devfeed.tech/tags/react-router-descendant-routes.md>), [react-router-tutorial](<https://devfeed.tech/tags/react-router-tutorial.md>), [tutorial](<https://devfeed.tech/tags/tutorial.md>)

### AI overview

A React Router 7 tutorial explaining descendant routes. It shows how an umbrella Users component can render an index route for a user list and a dynamic route for user details, so only the matching view is displayed.

### Source excerpt

How to: Descendant Routes in React Router 7. A step by step example on Descendant Routes with React Router ...

## React Router 7: Nested Routes

DevFeed: [React Router 7: Nested Routes](<https://devfeed.tech/articles/react-router-7-nested-routes-18970.md>)

Original publisher: [Read original article](<https://www.robinwieruch.de/react-router-nested-routes/>)

Author: Robin Wieruch

Published: 2025-01-06T05:52:52Z

Content type: tutorial

Language: en

Sources: [Robin Wieruch](<https://devfeed.tech/sources/robin-wieruch.md>)

Topics: [React Router](<https://devfeed.tech/topics/react-router.md>), [Tutorial](<https://devfeed.tech/topics/tutorial.md>), [Routing (disambiguation)](<https://devfeed.tech/topics/routing.md>)

Tags: [how-to](<https://devfeed.tech/tags/how-to.md>), [react](<https://devfeed.tech/tags/react.md>), [react-router](<https://devfeed.tech/tags/react-router.md>), [react-router-7](<https://devfeed.tech/tags/react-router-7.md>), [react-router-nested-routes](<https://devfeed.tech/tags/react-router-nested-routes.md>), [react-router-tutorial](<https://devfeed.tech/tags/react-router-tutorial.md>), [route](<https://devfeed.tech/tags/route.md>), [router](<https://devfeed.tech/tags/router.md>), [routing](<https://devfeed.tech/tags/routing.md>)

### AI overview

A step-by-step tutorial on using nested routes with React Router 7. It demonstrates tab-like navigation within a user page, explains index and fallback routes, and shows how to map nested paths to Route components.

### Source excerpt

How to: Nested Routes in React Router 7. A step by step example on Nested Routes with React Router ...

## React Router 7 Lazy Loading

DevFeed: [React Router 7 Lazy Loading](<https://devfeed.tech/articles/react-router-7-lazy-loading-18969.md>)

Original publisher: [Read original article](<https://www.robinwieruch.de/react-router-lazy-loading/>)

Author: Robin Wieruch

Published: 2025-01-06T05:52:51Z

Content type: tutorial

Language: en

Sources: [Robin Wieruch](<https://devfeed.tech/sources/robin-wieruch.md>)

Topics: [React Router](<https://devfeed.tech/topics/react-router.md>), [Tutorial](<https://devfeed.tech/topics/tutorial.md>), [React](<https://devfeed.tech/topics/react.md>), [Optimization](<https://devfeed.tech/topics/optimization.md>)

Tags: [code-splitting](<https://devfeed.tech/tags/code-splitting.md>), [lazy-loading](<https://devfeed.tech/tags/lazy-loading.md>), [performance](<https://devfeed.tech/tags/performance.md>), [react](<https://devfeed.tech/tags/react.md>), [react-router](<https://devfeed.tech/tags/react-router.md>), [react-router-7](<https://devfeed.tech/tags/react-router-7.md>), [react-router-lazy-loading](<https://devfeed.tech/tags/react-router-lazy-loading.md>), [react-router-tutorial](<https://devfeed.tech/tags/react-router-tutorial.md>), [tutorial](<https://devfeed.tech/tags/tutorial.md>)

### AI overview

This tutorial explains route-level lazy loading with React Router 7. It shows how splitting an application into smaller bundles can load only the code needed for a visited route, and demonstrates React.lazy, React Suspense, and @loadable/component.

### Source excerpt

How to: React Router 7 Lazy Loading: code-splitting at route level helps you lazy-load just the things that are needed by the user, which dramatically improves the performance ...

## React Router 7: Redirect

DevFeed: [React Router 7: Redirect](<https://devfeed.tech/articles/react-router-7-redirect-18972.md>)

Original publisher: [Read original article](<https://www.robinwieruch.de/react-router-redirect/>)

Author: Robin Wieruch

Published: 2025-01-06T05:52:48Z

Content type: tutorial

Language: en

Sources: [Robin Wieruch](<https://devfeed.tech/sources/robin-wieruch.md>)

Topics: [React Router](<https://devfeed.tech/topics/react-router.md>), [Tutorial](<https://devfeed.tech/topics/tutorial.md>), [React](<https://devfeed.tech/topics/react.md>)

Tags: [how-to](<https://devfeed.tech/tags/how-to.md>), [react](<https://devfeed.tech/tags/react.md>), [react-router](<https://devfeed.tech/tags/react-router.md>), [react-router-7](<https://devfeed.tech/tags/react-router-7.md>), [react-router-redirect](<https://devfeed.tech/tags/react-router-redirect.md>), [react-router-tutorial](<https://devfeed.tech/tags/react-router-tutorial.md>), [route](<https://devfeed.tech/tags/route.md>)

### AI overview

A tutorial on implementing redirects in React Router 7. It covers declarative redirects with the Navigate component, programmatic redirects with the useNavigate Hook, route-level alternatives, and server-side redirects for SEO and performance.

### Source excerpt

How to: Redirect in React Router 7 by using the declarative Navigate component or the programmatic useNavigate Hook ...

## React Router 7 Tutorial

DevFeed: [React Router 7 Tutorial](<https://devfeed.tech/articles/react-router-7-tutorial-18974.md>)

Original publisher: [Read original article](<https://www.robinwieruch.de/react-router/>)

Author: Robin Wieruch

Published: 2025-01-06T05:52:46Z

Content type: tutorial

Language: en

Sources: [Robin Wieruch](<https://devfeed.tech/sources/robin-wieruch.md>)

Topics: [React Router](<https://devfeed.tech/topics/react-router.md>), [Tutorial](<https://devfeed.tech/topics/tutorial.md>), [React](<https://devfeed.tech/topics/react.md>), [Routing (disambiguation)](<https://devfeed.tech/topics/routing.md>), [Vite](<https://devfeed.tech/topics/vite.md>)

Tags: [hooks](<https://devfeed.tech/tags/hooks.md>), [layout](<https://devfeed.tech/tags/layout.md>), [navigation](<https://devfeed.tech/tags/navigation.md>), [react](<https://devfeed.tech/tags/react.md>), [react-router](<https://devfeed.tech/tags/react-router.md>), [react-router-7](<https://devfeed.tech/tags/react-router-7.md>), [react-router-tutorial](<https://devfeed.tech/tags/react-router-tutorial.md>), [routing](<https://devfeed.tech/tags/routing.md>), [tutorial](<https://devfeed.tech/tags/tutorial.md>), [vite](<https://devfeed.tech/tags/vite.md>)

### AI overview

A step-by-step tutorial for building a React application with React Router 7. It covers project setup with Vite, navigation and links, route matching, layout routes, and related routing patterns.

### Source excerpt

React Router 7 tutorial: setup, hooks, nested routes, dynamic routes, programmatic navigation, active links, layout routes, index routes and more. A step by step React tutorial for beginners ...

## Tutorial: GraphQL Input Types and Custom Resolvers

DevFeed: [Tutorial: GraphQL Input Types and Custom Resolvers](<https://devfeed.tech/articles/tutorial-graphql-input-types-and-custom-resolvers-23399.md>)

Original publisher: [Read original article](<https://www.apollographql.com/blog/input-types-and-client-caching>)

Author: Evans Hauser

Published: 2017-06-06T00:15:00Z

Content type: tutorial

Language: en

Sources: [Apollo Blog](<https://devfeed.tech/sources/apollo-blog.md>)

Topics: [GraphQL](<https://devfeed.tech/topics/graphql.md>), [Tutorial](<https://devfeed.tech/topics/tutorial.md>), [React](<https://devfeed.tech/topics/react.md>), [Messaging](<https://devfeed.tech/topics/messaging.md>)

Tags: [apollo](<https://devfeed.tech/tags/apollo.md>), [graphql](<https://devfeed.tech/tags/graphql.md>), [latency](<https://devfeed.tech/tags/latency.md>), [messaging](<https://devfeed.tech/tags/messaging.md>), [mutation](<https://devfeed.tech/tags/mutation.md>), [react-router](<https://devfeed.tech/tags/react-router.md>), [react-router-tutorial](<https://devfeed.tech/tags/react-router-tutorial.md>), [resolvers](<https://devfeed.tech/tags/resolvers.md>), [routing](<https://devfeed.tech/tags/routing.md>), [schema](<https://devfeed.tech/tags/schema.md>), [server](<https://devfeed.tech/tags/server.md>), [state](<https://devfeed.tech/tags/state.md>), [tutorial](<https://devfeed.tech/tags/tutorial.md>), [types](<https://devfeed.tech/tags/types.md>)

### AI overview

Part 5 of a full-stack GraphQL and React tutorial explains how to build a channel detail view for a messaging application. It covers field arguments in queries, Apollo's normalized cache, GraphQL input types, custom resolvers, and mutations for posting messages.

### Source excerpt

This is part 5 of our full-stack GraphQL + React Tutorial that guides you through creating a messaging application. Each part is self-contained and introduces new key concepts, which means you don't have to do all the other parts before doing this one.