「.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。

目次 †

↑

概要 †

Redux対応を行う。

↑

詳細 †

以下で生成したコードを修正して3分割のヘッダ、左メニュー、メインエリアの画面のRedux対応を行うにはどのようにすればよいですか？
npm create vite@latest my-app -- --template react-ts

なお、「react-router-dom」が導入されており、左メニューのリンクを押下するとメインエリアが画面遷移するようになっている。
// src/App.tsx
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Header from './components/Header'
import Sidebar from './components/Sidebar'
import Home from './pages/Home'
import About from './pages/About'
import Settings from './pages/Settings'
import { Counter } from './pages/Counter'
import './App.css'

function App() {
  return (
    <BrowserRouter>
      <div className="app-container">
        <Header />
        <div className="body-container">
          <Sidebar />
          <main className="main-area">
            <Routes>
              <Route path="/" element={<Home />} />
              <Route path="/about" element={<About />} />
              <Route path="/settings" element={<Settings />} />
              <Route path="/counter" element={<Counter />} />
            </Routes>
          </main>
        </div>
      </div>
    </BrowserRouter>
  )
}

export default App

追加フィアルの構成は以下の通り
.\src\components\Header.tsx
.\src\components\Sidebar.tsx
.\src\pages\Home.tsx
.\src\pages\About.tsx
.\src\pages\Settings.tsx
.\src\pages\Counter.tsx

Redux対応の修正内容を教えてください。
トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS