反応で何かしようかな.
反応器を使って環境を構築...
反応ルータをダウンロードします.
ルータードームもダウンロードしました...
まず開発環境の構築
React from 'react'
import { BrowserRouter, Route, Switch, Link } from "react-router-dom"
転送の準備
function Home() {
return <h1>MyPage<h1>;
}
like this.. 物事を表す構成部品を作成します.
メニューの作成
ページを表示するコンポーネントを作成した場合は、各コンポーネントにナビゲートするメニューを作成する必要がありますよね?
(上に作成した構成部品は画面に出力されていないので、出力する必要があります)
function App () {
return (
<BrowserRouter>
<div>
<nav>
<ul>
<li>
Home
</li>
</ul>
</nav>
</div>
</BrowserRouter>
)
}
navは指定された領域です。
BrowserRouterは
この中にルート、スイッチ、リンクがあればいいです。
アドレスに基づいて異なるページビューを作成します。
上に作成したコンポーネントをアドレス表示によって異なります.
(通常urlの後ろにあるgoogle.com/asdasdと見なすことができます.)
ホームアドレス"/"
MyPageページのアドレス「/myppage」
Dashboardページのアドレス"/dashboard"
Switch, Route
マッチングパスとして機能する構成部品
React from 'react'
import { BrowserRouter, Route, Switch, Link } from "react-router-dom"
function Home() {
return <h1>MyPage<h1>;
} 役に立つ.オフの場合、一致するすべての要素がレンダリングされます.
リンクコンポーネントが定義されたURLパスと一致する場合にのみ機能します.
Link
パスを接続する構成部品.
ページ切り替えは、ページを再ロードすることなく、アプリケーションをそのままにします.
HTML 5 History APIを使用してページのアドレスのみを変更します.
function App () {
return (
<BrowserRouter>
<div>
<nav>
<ul>
<li>
Home
</li>
<li>
MyPage
</li>
<li>
Dashboard
</li>
</ul>
</nav>
{/* 주소경로와 우리가 아까 만든 3개의 컴포넌트를 연결해줍니다. */}
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/about"> {/* 경로를 설정하고 */}
<MyPage /> {/* 컴포넌트를 연결합니다. */}
</Route>
<Route path="/dashboard">
<Dashboard />
</Route>
</Switch>
</div>
</BrowserRouter>
)
}使用するto属性接続は、ルーティング素子のpathアドレスを設定します。
function App() {
return (
<BrowserRouter>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>{/* Link 컴포넌트를 이용하여 경로를 연결합니다 */}
</li>
<li>
<Link to="/about">MyPage</Link>
</li>
<li>
<Link to="/dashboard">Dashboard</Link>
</li>
</ul>
</nav>
생략...Reference
この問題について(反応で何かしようかな.), 我々は、より多くの情報をここで見つけました https://velog.io/@rmfhsep/리액트로-뭔가를-해보자テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol