react-router domの適用

react-router-dom
React-Routerとは?新しいページをロードせずに、必要なデータを1つのページから取得します.

cmd> npm install react-router-dom

ルーティングと
コンポーネントフォルダを作成します.
それぞれ家に帰って、about.js cssとmovie.js cssを加える
home.jsは既存のappです.jsコードの入力
app部分をホームに変更
ポストapp.このようにjsを修正する

import React from 'react';
import './App.css';
import {HashRouter,Route} from 'react-router-dom';
import About from './routes/About';

function App(){
  return <HashRouter>
    <Route path="/about" component={About}/>
  </HashRouter>  
}

export default App;

HashRouterで
Routeラベルを追加します.Routeラベルには2つのpropsが含まれます.
url用path propsとコンポーネントを呼び出すcomponent props.

import React from 'react';

function About(){
return <span>About this page</span>

}

export default About;

about.jsを変更した後

アドレスの後ろにaboutを付けてabout素子を表します.

ルータの動作

もし、もし

<Route path="/home">
<h1>1</h1>
</Route>

<Route path="/home/intro">
<h1>2</h1>
</Route>

家の中では、通常1
/home/intro予想出力2
ただし、/home/introは1,2を同時に出力します.
ルータがurlを検索する方法は以下の通りです.
/、/home、/home/intro順
path propsがあるかどうかを探します
しかしpath propsには/home、/home/introが存在する
後者では、両方の構成部品が表示されます.

   <Route path="/" exact={true} component={Home}/>
    <Route path="/about" component={About}/>

したがって、親ルータ素子のaccept属性がtrueである場合、
サブルータには一緒に入らない.
app.js

import React from 'react';
import './App.css';
import {HashRouter,Route} from 'react-router-dom';
import About from './routes/About';
import Home from './routes/Home'

function App(){
  return( <HashRouter>
    <Route path="/" exact={true} component={Home}/>
    <Route path="/about" component={About}/>
  </HashRouter>  
  );
}

export default App;

About.css

about__container {
    box-shadow: 0 13px 27 -5px rgba(50,50,93,0.25),0 8px 16px -8px rgba(0,0,0,0.3)
    ,0 -6px 16px -6px rgba(0,0,0,0.25);
    padding:20px;
    border-radius:5px;
    background-color: white;
    margin: 0 auto;
    margin-top:100px;
    width: 100%;
    max-width: 400px;
    font_weight:300;
}

.about__container span:first-child{
    font-size:20px
}
.about__contatner span:last-child{
    display: block;
    margin-top: 10px;
}

https://developer.mozilla.org/ko/docs/Web/CSS/box-shadow
https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child
About.js

import React from 'react';
import './App.css';
import {HashRouter,Route} from 'react-router-dom';
import About from './routes/About';
import Home from './routes/Home'

function App(){
  return( <HashRouter>
    <Route path="/" exact={true} component={Home}/>
    <Route path="/about" component={About}/>
  </HashRouter>  
  );
}

export default App;