反応印刷中にreact-router-domが突然現れた.
その時はあまり興味がなかったのですが...reactでページを作りたいので、復習の過程で、複数のページに分けやすいreact-router-domということで、もう一度復習しました.😩
(私はブログをあまり書かないのですが、これは私のせいです.😭 😭)
https://youtu.be/WLdbsl9UwDc(約44分コース)
いつも感謝の生活コードで👍🏻
復習を始める

1. React-Router-Dom

https://reactrouter.com/web/guides/quick-startになると、インストールからマニュアルがよく書かれています.npm install react-router-domで取り付けます!

1-1. Router

import {BrowserRouter , Route } from 'react-router-dom'

// 사용하기 위해서는 항상 import를 해야한다!! 

BrowerRouterは、ページ全体でRouteの全体的な組み合わせを使うため、分かりやすく見えます.
(パッケージトップレベル素子)RouteはURLに従って変更が必要なページに設定されています.

function App() {
  
  return (
 	<div>
    		<h1>React Router DOM example</h1>
    			<ul>
    				<li><a href='/'>Home</a></li>
    				<li><a href='/topics'>Topics</a></li>
    				<li><a href='/contact'>Contact</a></li>
    			</ul>
    		<Route path='/'><Home></Home></Route>
    		<Route path='/topics'><Topics></Topics></Route>
    		<Route path='/contact'><Contact></Contact></Route>
  	</div>
  )
}
ReactDom.render(<BrowerRouter><App /></BrowerRouter>, document.getElementById('root'));

必要なページをRouteコンポーネントで包み、パスをpathに設定します.
ただし、ここでexactが使用されていない場合は、正しいpathマッチングの場合にのみ表示されます.
(正確な値が見つからない場合は、入力/topicesにもホームページが表示されます)

1-2. Switch

import {BrowserRouter , Route, Switch } from 'react-router-dom'

// 사용하기 위해서는 항상 import를 해야한다!! 

EXcelを使わない場合は、同じ効果を得るためにSwitchという素子で包みます.SwitchでRouteを囲むと、pathに一致する要素が発見されると、まず一致が出力される.したがって、すべてのルーティングの前に正確な値が必要です.

1-3. Link

import {BrowserRouter , Route, Switch, Link } from 'react-router-dom'

// 사용하기 위해서는 항상 import를 해야한다!! 

Linkは、ロードを続行するのではなく、重要なページに動的にインポートされたデータを非同期でインポートする必要がある単一ページアプリケーションを作成します.
前に使用したaラベルを使用すると、常に再ロードされますが、リンクを使用してページは再ロードされません.

function App() {
  
  return (
 	<div>
    		<h1>React Router DOM example</h1>
    			<ul>
    				<li><Link to='/'>Home</a></li>
    				<li><Link to='/topics'>Topics</a></li>
    				<li><Link to='/contact'>Contact</a></li>
    			</ul>
    		<Switch>
    			<Route path='/'><Home></Home></Route>
    			<Route path='/topics'><Topics></Topics></Route>
    			<Route path='/contact'><Contact></Contact></Route>
    		</Switch>
  	</div>
  )
}

1-4. HashRouter

import {HashRouter , Route, Switch,Link } from 'react-router-dom'

// 사용하기 위해서는 항상 import를 해야한다!! 

HashRouterを使用するために、従来使用していたBrowerRouterの代わりに使用することができる.
アドレスの後ろにパスがある場合は、ルートページのhtmlファイルにサービスしたり、BrowerRouterを使用したりできますが、難しい場合はHashRouterを使用します.

function App() {
  
  return (
 	<div>
    		<h1>React Router DOM example</h1>
    			<ul>
    				<li><Link to='/'>Home</a></li>
    				<li><Link to='/topics'>Topics</a></li>
    				<li><Link to='/contact'>Contact</a></li>
    			</ul>
    		<Switch>
    			<Route path='/'><Home></Home></Route>
    			<Route path='/topics'><Topics></Topics></Route>
    			<Route path='/contact'><Contact></Contact></Route>
    		</Switch>
  	</div>
  )
}
ReactDom.render(<HashRouter><App /></HashRouter>, document.getElementById('root'));

1-5. NavLink

import {BrowserRouter , Route, Switch, NavLink } from 'react-router-dom'

// 사용하기 위해서는 항상 import를 해야한다!! 

(以前のコードLinkをNavLinkに変更)NavLinkはLinkと類似しているが、機能は増加している.NavLinkを使用すると、ユーザが使用しているページを直感的に理解することができる.
elementが表示されると、使用中のページにactiveというクラスが追加されます.

1-6. Nested Routing

RouteにRouteを埋め込んでページを分割し続けることができます.

1-7. Parameter

liラベルを直接作成してリンクを作成することはできますが、ページ数が増加し続けると、直接追加するのは非常に困難です.したがって、オブジェクト、配列、および重複文を使用して、対応する数のリンクを自動的に作成するのは便利です.

let contents = [
  {id:1 , title:'HTML', descrition :'HTML is ...'},
  {id:2 , title:'JS', descrition :'JS is ...'},
  {id:3 , title:'React', descrition :'React is ...'}
]

// 생성할 함수형 컴포넌트 내에 반복문 작성하기!
let lis = [];
for(let i=0;i<contents.length ;i++){
 lis.push(<li key={contents[i].id}><NavLink to={'/topics'+contenst[i].id}>{contents[i].title}</NavLink></li>)
}

// li를 반복문으로 해당 배열만큼 생성하기!
<ul>
    {lis}
</ul>

userParamsの使用(次のコードを参照)

import {BrowserRouter , Route, Switch, NavLink,useParams } from 'react-router-dom'
// 사용 할때는 항상 import

fuction Topic(){
	let parmas = useParams();
  	//console.log(prams) 
  	// 아래 :topic_id를 키값으로 한 값이 나온다.!! 
  	let topic_id = params.topic.id
    //초기값.
   	let selected_topic={
      title: 'Sorry',
      desciption : 'Not Found'
    };
  
  for(let i=0;i<contents.length;i++){
    if(contents[i] === Number(topic_id)){
      	selected_topic = contents[i]
    	break;
    }
    
    return(
    	<div>
      		<h3>{seleted_topic.title}</h3>
      			{seleted_topic.desciption}
      	</div>
    )
  
}

<Route path='/topics/:topic_id'>
	<Topic></Topic>  
</Route>

useParamにより、設定された値に基づいて容易に値を取得することができ、ページを動的に生成することができる.

2.終了

これまでコンポーネントの作成に専念していた場合は、Webアプリケーションの作成に複数のページを組み合わせる練習が必要でした.このような良いライブラリをうまく利用できれば、簡単に複数のページを作ることができて、とても不思議で仲直りしたような気がします.😘
なかなか反応できないけど….必ず仕上げなければならない