コンポーネントの適用

3682 ワード
ToyProject-MusicCommission テキストリンク 
import React, { Component } from 'react';
import Home from './pages/Home';
import Music from './pages/Music';
import Contact from './pages/Contact';
import {Route, Routes} from 'react-router-dom';
import './App.css';

class App extends Component {

  render() {
    return (
          <Routes>
            <Route path='/' element={<Home />}></Route>
            <Route path='/music' element={<Music />}></Route>
            <Route path='/contact' element={<Contact />}></Route>
          </Routes>
    );
  }
}

export default App;
基本的には,サーバにネットワーク要求を送信して特定ページの出力を取得するのではなく,単一ページアプリケーション(SPA)の実現を目指し,この機能を実現するために素子切替が可能な反応ルータを用いた.
<Routes>親ラベルの<Route>サブ構造を用いてpathに一致する代表素子のみを出力する.v 6バージョンではdefaultがdefaultに適用され、正しいパスに一致するコンポーネントだけがappコンポーネントに出力されます.

CSS

#root{
    width: inherit;
    height: inherit;
}
DOMのルート要素をbodyラベルのwidth、height属性と同じにします.これはhtml、body、root要素をビューポート全体のサイズに簡単に設定するためです.(2回設定する必要はなく、bodyラベルでビューポートサイズを追跡するだけでrootが自動的に適用されます.)
Flash/Filex学習ノート(23):運動学原理
[機械学習]機械学習教科書Ch 04-(1)