Quick rundown of how to add a Layout component with React Router 7:
1. Make a Layout component somewhere (you can name it anything, I used Layout).
Import { Outlet } into it. Its like { children } & is where the page component content will render.
#100Devs #react #reactrouter #webdev
1. Make a Layout component somewhere (you can name it anything, I used Layout).
Import { Outlet } into it. Its like { children } & is where the page component content will render.
#100Devs #react #reactrouter #webdev
September 12, 2025 at 7:14 PM
Quick rundown of how to add a Layout component with React Router 7:
1. Make a Layout component somewhere (you can name it anything, I used Layout).
Import { Outlet } into it. Its like { children } & is where the page component content will render.
#100Devs #react #reactrouter #webdev
1. Make a Layout component somewhere (you can name it anything, I used Layout).
Import { Outlet } into it. Its like { children } & is where the page component content will render.
#100Devs #react #reactrouter #webdev
In the previous iteration of the agency website, I used a Header component to render the hero section for each page. It was called from each page, so they passed props with h1 text. Now, I'm using a Layout component, so its different. I got it working like this:
#100Devs #webdev #react #reactrouter
#100Devs #webdev #react #reactrouter
September 12, 2025 at 9:00 PM
In the previous iteration of the agency website, I used a Header component to render the hero section for each page. It was called from each page, so they passed props with h1 text. Now, I'm using a Layout component, so its different. I got it working like this:
#100Devs #webdev #react #reactrouter
#100Devs #webdev #react #reactrouter
Wrote about how I made a static generated #landing page for pixenum.com with react router framework on my #devblog:
philrich.dev/react-router-migration/ Migration wasn't so easy but I solved issues.
#developer #frontend #react #remix #reactrouter
philrich.dev/react-router-migration/ Migration wasn't so easy but I solved issues.
#developer #frontend #react #remix #reactrouter
Migrating to React Router Framework: Challenges Beyond the Official Guide
My experience migrating from React Router library to the framework and the challenges missing from the official guide.
philrich.dev
March 4, 2025 at 1:45 PM
Wrote about how I made a static generated #landing page for pixenum.com with react router framework on my #devblog:
philrich.dev/react-router-migration/ Migration wasn't so easy but I solved issues.
#developer #frontend #react #remix #reactrouter
philrich.dev/react-router-migration/ Migration wasn't so easy but I solved issues.
#developer #frontend #react #remix #reactrouter
Moved over the Presets and Server Bundles docs to reactrouter . com
reactrouter.com/how-to/presets
reactrouter.com/how-to/serve...
reactrouter.com/how-to/presets
reactrouter.com/how-to/serve...
Presets
reactrouter.com
June 25, 2025 at 3:03 PM
Moved over the Presets and Server Bundles docs to reactrouter . com
reactrouter.com/how-to/presets
reactrouter.com/how-to/serve...
reactrouter.com/how-to/presets
reactrouter.com/how-to/serve...
ReactフォームにCSV保存機能を追加する方法（CSRF対策強化版）
analyzegear.co.jp/blog/2950
#React #CSRF対策 #CSV #ReactRouter #CSRF #PHP #フォーム #エックスサーバー #アナライズギア #analyzegear #AG
analyzegear.co.jp/blog/2950
#React #CSRF対策 #CSV #ReactRouter #CSRF #PHP #フォーム #エックスサーバー #アナライズギア #analyzegear #AG
ReactフォームにCSV保存機能を追加する方法（CSRF対策強化版）
Reactを使ったお問い合わせフォームに「CSV保存機能」を追加する方法を解説します。CSRFトークンの有効期限を導入した高度なセキュリティ対策を実現し、送信されたデータをCSV形式で保存する仕組みを実装します。1. 実装の背景と目的お問い...
analyzegear.co.jp
December 11, 2024 at 12:03 AM
ReactフォームにCSV保存機能を追加する方法（CSRF対策強化版）
analyzegear.co.jp/blog/2950
#React #CSRF対策 #CSV #ReactRouter #CSRF #PHP #フォーム #エックスサーバー #アナライズギア #analyzegear #AG
analyzegear.co.jp/blog/2950
#React #CSRF対策 #CSV #ReactRouter #CSRF #PHP #フォーム #エックスサーバー #アナライズギア #analyzegear #AG
I’ve heard @remix is dead, but people may be mistaking that for @reactrouter is dead, too!
They have no presence here! I’ve only seen @markdalgleish.com post updates 😭
But TIL they added a type-safe href utility last month??
reactrouter.com/changelog#v720
They have no presence here! I’ve only seen @markdalgleish.com post updates 😭
But TIL they added a type-safe href utility last month??
reactrouter.com/changelog#v720
CHANGELOG.md
reactrouter.com
March 10, 2025 at 9:14 PM
I’ve heard @remix is dead, but people may be mistaking that for @reactrouter is dead, too!
They have no presence here! I’ve only seen @markdalgleish.com post updates 😭
But TIL they added a type-safe href utility last month??
reactrouter.com/changelog#v720
They have no presence here! I’ve only seen @markdalgleish.com post updates 😭
But TIL they added a type-safe href utility last month??
reactrouter.com/changelog#v720
🚀New Blog Post🚀
I'm rebuilding tartarusinsight.com using Next.js & React Router, and I'm documenting every step!📖
🏡Homepage
Check it out! 👇
opensourceodyssey.com/next-js-vs-r...
#WebDev #JavaScript #Coding #buildinpublic #AI #opensource #Nextjs #reactrouter #react
I'm rebuilding tartarusinsight.com using Next.js & React Router, and I'm documenting every step!📖
🏡Homepage
Check it out! 👇
opensourceodyssey.com/next-js-vs-r...
#WebDev #JavaScript #Coding #buildinpublic #AI #opensource #Nextjs #reactrouter #react
Next.js vs. React Router(Remix): Home Page Structure – Part 3
Now that the fonts are in place, it’s time to start building! In this post, I’m recreating the structure of the Tartarus Insight homepage using both Next.js and React Router. The layout includes some ...
opensourceodyssey.com
April 29, 2025 at 2:33 AM
🚀New Blog Post🚀
I'm rebuilding tartarusinsight.com using Next.js & React Router, and I'm documenting every step!📖
🏡Homepage
Check it out! 👇
opensourceodyssey.com/next-js-vs-r...
#WebDev #JavaScript #Coding #buildinpublic #AI #opensource #Nextjs #reactrouter #react
I'm rebuilding tartarusinsight.com using Next.js & React Router, and I'm documenting every step!📖
🏡Homepage
Check it out! 👇
opensourceodyssey.com/next-js-vs-r...
#WebDev #JavaScript #Coding #buildinpublic #AI #opensource #Nextjs #reactrouter #react
Reactのルーター訳分からん。フロントエンドしかいらん場合はReactRouterでええの？
January 3, 2025 at 8:26 AM
Reactのルーター訳分からん。フロントエンドしかいらん場合はReactRouterでええの？
I picked NextJS over reactrouter simply for the social media preview functionality.
So much easier on Next.
And my project seems to still build in under a second which is pretty sweet.
So much easier on Next.
And my project seems to still build in under a second which is pretty sweet.
August 13, 2025 at 4:08 PM
I picked NextJS over reactrouter simply for the social media preview functionality.
So much easier on Next.
And my project seems to still build in under a second which is pretty sweet.
So much easier on Next.
And my project seems to still build in under a second which is pretty sweet.
Just learned about named components and querystring params in #ReactRouter and it's pretty awesome! 👌🏻🔥💥 @eggheadio
November 17, 2024 at 7:31 PM
Just learned about named components and querystring params in #ReactRouter and it's pretty awesome! 👌🏻🔥💥 @eggheadio
Please reach out if you're looking for a Frontend or Full-stack developer.
I feel the most comfortable working with #reactjs (with #reactrouter #tanstack or #nexths ), #vuejs (raw or with #nuxtjs) or #laravel and I prefer to paint pixels with #tailwindcss
I feel the most comfortable working with #reactjs (with #reactrouter #tanstack or #nexths ), #vuejs (raw or with #nuxtjs) or #laravel and I prefer to paint pixels with #tailwindcss
February 21, 2025 at 5:34 PM
Please reach out if you're looking for a Frontend or Full-stack developer.
I feel the most comfortable working with #reactjs (with #reactrouter #tanstack or #nexths ), #vuejs (raw or with #nuxtjs) or #laravel and I prefer to paint pixels with #tailwindcss
I feel the most comfortable working with #reactjs (with #reactrouter #tanstack or #nexths ), #vuejs (raw or with #nuxtjs) or #laravel and I prefer to paint pixels with #tailwindcss
NextJS has a ton of optimization, so much that only vercel can handle that at enterprize level. (requires 70+ services on AWS)
And It was fine before RSC.
Now the game has changed. See eg: ReactRouter Framework. It handles RSC, (SSG, ... ) and the build is what > a simple express server <3.
And It was fine before RSC.
Now the game has changed. See eg: ReactRouter Framework. It handles RSC, (SSG, ... ) and the build is what > a simple express server <3.
April 23, 2025 at 8:42 AM
NextJS has a ton of optimization, so much that only vercel can handle that at enterprize level. (requires 70+ services on AWS)
And It was fine before RSC.
Now the game has changed. See eg: ReactRouter Framework. It handles RSC, (SSG, ... ) and the build is what > a simple express server <3.
And It was fine before RSC.
Now the game has changed. See eg: ReactRouter Framework. It handles RSC, (SSG, ... ) and the build is what > a simple express server <3.
ReactRouter、めんどくさいな…
まあやるんだけども
まあやるんだけども
November 2, 2024 at 3:46 PM
ReactRouter、めんどくさいな…
まあやるんだけども
まあやるんだけども
Some good stuff posted by @alem.forge42.dev of course.
Also; is @remix_run or @reactrouter ever going to exist here? :D
Also; is @remix_run or @reactrouter ever going to exist here? :D
December 5, 2024 at 7:15 AM
Some good stuff posted by @alem.forge42.dev of course.
Also; is @remix_run or @reactrouter ever going to exist here? :D
Also; is @remix_run or @reactrouter ever going to exist here? :D
Dynamic routes in React Router:
/user/:id + useParams() = powerful detail pages. Combine with useNavigate() for redirects. Routing logic just got easier. 🧭 #ReactRouter
/user/:id + useParams() = powerful detail pages. Combine with useNavigate() for redirects. Routing logic just got easier. 🧭 #ReactRouter
August 16, 2025 at 5:02 PM
Dynamic routes in React Router:
/user/:id + useParams() = powerful detail pages. Combine with useNavigate() for redirects. Routing logic just got easier. 🧭 #ReactRouter
/user/:id + useParams() = powerful detail pages. Combine with useNavigate() for redirects. Routing logic just got easier. 🧭 #ReactRouter
Made a react router v7 auth boilerplate. Time to ditch the pre-made auth solutions #buildinpublic #reactrouter #react
github.com/nick-friedri...
github.com/nick-friedri...
GitHub - nick-friedrich/remix-router-v7-boilerplate-auth
Contribute to nick-friedrich/remix-router-v7-boilerplate-auth development by creating an account on GitHub.
github.com
January 31, 2025 at 4:07 PM
Made a react router v7 auth boilerplate. Time to ditch the pre-made auth solutions #buildinpublic #reactrouter #react
github.com/nick-friedri...
github.com/nick-friedri...
Are there any #React folks out there using #ReactRouter loaders/actions together with #TanStackQuery in a SPA?
In particular, it's a bit unclear to me when I should be using loaders and when I should stick the useQuery?
Also, where to store the auth token now so I can use it in both places?
In particular, it's a bit unclear to me when I should be using loaders and when I should stick the useQuery?
Also, where to store the auth token now so I can use it in both places?
March 18, 2025 at 6:26 AM
Are there any #React folks out there using #ReactRouter loaders/actions together with #TanStackQuery in a SPA?
In particular, it's a bit unclear to me when I should be using loaders and when I should stick the useQuery?
Also, where to store the auth token now so I can use it in both places?
In particular, it's a bit unclear to me when I should be using loaders and when I should stick the useQuery?
Also, where to store the auth token now so I can use it in both places?
I've been quiet about coding stuff since the #100Devs hackathon that started on Valentine's Day. We're waiting for Leon to give the go-ahead to continue building. In the meantime, I worked on some React Router 7 stuff that we'll incorporate into the rebuilt/refactored version.
#webdev #reactrouter
#webdev #reactrouter
February 26, 2025 at 8:03 PM
I've been quiet about coding stuff since the #100Devs hackathon that started on Valentine's Day. We're waiting for Leon to give the go-ahead to continue building. In the meantime, I worked on some React Router 7 stuff that we'll incorporate into the rebuilt/refactored version.
#webdev #reactrouter
#webdev #reactrouter
January 16, 2025 at 9:00 AM
Moved over and update the Quickstart tutorial from Remix v2 docs to reactrouter . com
reactrouter.com/tutorials/qu...
reactrouter.com/tutorials/qu...
Quick Start
reactrouter.com
June 24, 2025 at 1:58 PM
Moved over and update the Quickstart tutorial from Remix v2 docs to reactrouter . com
reactrouter.com/tutorials/qu...
reactrouter.com/tutorials/qu...
PSA if you're using the rolldown-vite experimental preview
![import { cloudflare } from "@cloudflare/vite-plugin";
import { reactRouter } from "@react-router/dev/vite";
import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "vite";
- import tsconfigPaths from "vite-tsconfig-paths";
export default defineConfig({
plugins: [
cloudflare({ viteEnvironment: { name: "ssr" } }),
reactRouter(),
- tsconfigPaths(),
tailwindcss(),
],
+ experimental: {
+ enableNativePlugin: true,
+ },
+ resolve: {
+ tsconfigPaths: true,
+ },
});](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:mbfnjykxxusvts3qj46qmueu/bafkreigbq2wfpdv7piithxwmi6i2243sui3x3k2pwia5po7gkfo2ib3rh4@jpeg)
August 2, 2025 at 2:38 PM
PSA if you're using the rolldown-vite experimental preview
今日のQiitaトレンド
【個人開発】爆速でプランニングポーカーアプリを作成【Vibe Coding×ReactRouter×TypeScript×Firebase】
この記事では、Vibe Codingでプランニングポーカーアプリを開発した経験を通じて、AI開発の可能性と課題を共有しています。
AIはアプリ作成を容易にする一方で、プロンプト設計の重要性、インフラ設定の難しさ、生成コードの保守性といった課題が浮き彫りになりました。
AIはプログラマーを不要にするのではなく、その役割と求められる知識を変革すると指摘。
人間によるレビューや品質担保の重要性が増すことを強調しています。
【個人開発】爆速でプランニングポーカーアプリを作成【Vibe Coding×ReactRouter×TypeScript×Firebase】
この記事では、Vibe Codingでプランニングポーカーアプリを開発した経験を通じて、AI開発の可能性と課題を共有しています。
AIはアプリ作成を容易にする一方で、プロンプト設計の重要性、インフラ設定の難しさ、生成コードの保守性といった課題が浮き彫りになりました。
AIはプログラマーを不要にするのではなく、その役割と求められる知識を変革すると指摘。
人間によるレビューや品質担保の重要性が増すことを強調しています。
【個人開発】爆速でプランニングポーカーアプリを作成【Vibe Coding×ReactRouter×TypeScript×Firebase】 #ClaudeCode - Qiita
はじめに こんにちは、react-router 好きの @guppy0356 です。 Vibe Coding で作成したプランニングポーカーアプリについてご紹介します。 Vibe Coding を初めてやってみて新しい気付きがあったので共有できたらと思います な...
qiita.com
September 15, 2025 at 10:30 PM
今日のQiitaトレンド
【個人開発】爆速でプランニングポーカーアプリを作成【Vibe Coding×ReactRouter×TypeScript×Firebase】
この記事では、Vibe Codingでプランニングポーカーアプリを開発した経験を通じて、AI開発の可能性と課題を共有しています。
AIはアプリ作成を容易にする一方で、プロンプト設計の重要性、インフラ設定の難しさ、生成コードの保守性といった課題が浮き彫りになりました。
AIはプログラマーを不要にするのではなく、その役割と求められる知識を変革すると指摘。
人間によるレビューや品質担保の重要性が増すことを強調しています。
【個人開発】爆速でプランニングポーカーアプリを作成【Vibe Coding×ReactRouter×TypeScript×Firebase】
この記事では、Vibe Codingでプランニングポーカーアプリを開発した経験を通じて、AI開発の可能性と課題を共有しています。
AIはアプリ作成を容易にする一方で、プロンプト設計の重要性、インフラ設定の難しさ、生成コードの保守性といった課題が浮き彫りになりました。
AIはプログラマーを不要にするのではなく、その役割と求められる知識を変革すると指摘。
人間によるレビューや品質担保の重要性が増すことを強調しています。
Has anyone used @prismicio with @reactjs and #reactRouter? I am sure they form an awesome combo, just confused about best way to set it up..
November 17, 2024 at 7:31 PM
Has anyone used @prismicio with @reactjs and #reactRouter? I am sure they form an awesome combo, just confused about best way to set it up..
📌 Critical vulnerability in React Router allows content spoofing and data alteration. Update to version 7.5.2 immediately. #CyberSecurity #ReactRouter https://tinyurl.com/27f4vdoy
Critical Vulnerability in React Router Allows Content Spoofing and Data Tampering
A critical vulnerability in React Router can lead to content spoofing and data tampering. Users are urged to update immediately to version 7.5.2. This security flaw allows attackers to manipulate data and falsify content, posing a significant risk to web applications using React Router.
tinyurl.com
April 29, 2025 at 12:42 PM
📌 Critical vulnerability in React Router allows content spoofing and data alteration. Update to version 7.5.2 immediately. #CyberSecurity #ReactRouter https://tinyurl.com/27f4vdoy