私のメモは、反応を開始しようとする.
フロントエンドのdevのビットはASPでWebフォームにありました.ネットこの生態系全体で始めることは、私が強くタイプされた、簡単にテスト可能なコードへのアクセスを持っている背景から来るかなり困難なようです.
これはおそらく私が以前に述べたことをリハーサルすることですが、フロントエンドでは「良い」方法で何かが実装されているかどうかの「意見」の方が多いように感じます.
とにかく、私は反応で混乱しようとしています.私はいくつかの点でうまくいけば、kritnerにあるほとんどのプレースホルダーのサイトに置き換えたい.何かもう少し充実して.
最初に始めるのは、ページの一般的な共有レイアウトです.
使用しているよCode Sandbox 私の実験のために.コードサンドボックスは、あなたがそれを使用したことがない場合は、PlayeScriptなどの有無にかかわらず、反応、Vueのような様々な技術スタックを持つサンプルアプリケーションを一緒に置くための遊び場(またはサンドボックス…)を可能にします.

スタブ成分

テンプレートからの起動React Typescript . まず第一に、私のナビゲーションがリンクするいくつかのページスタブを紹介します.
アバウト.TSX

import React from "react";

export default function About() {
  return <div>About me</div>;
}

連絡先.TSX

import React from "react";

export default function Contact() {
  return <div>Contact</div>;
}

ホーム.TSX

import React from "react";

export default function Home() {
  return <div>Home</div>;
}

上で、私はクラス構成要素よりむしろ機能コンポーネントを利用していますhttps://reactjs.org/docs/components-and-props.html#function-and-class-components 特に必要でない限り、彼らは好まれるようです彼らはもっと簡単に見える.

ルーティング

URLルーティング

これがルーティングを導入する最も良い場所(私は推測しないでしょう)であるかどうかわからないが、反応の規則/標準についての全体の多くをまだ知りません、これは私が行っているものです.更新しますApp.tsx ルーティングを含める.
アプリケーションの起動コードは以下の通りです.

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

ルーティングのために、「反応ルータDOM」パッケージをコードサンドボックスに挿入します.

我々は今、URLルーティングをサポートするアプリケーションコンポーネントにルーティングを追加します.最初に私たちの輸入品(いくつかの余分な私たちになるでしょう):

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

// Also importing the components that will be routed to
import Home from "./pages/Home";
import Contact from "./pages/Contact";
import About from "./pages/About";

使用しているよBrowserRouter , Switch , and Route URLルーティング用.アプリのコンポーネントは、以前の“ホーム”、“について”、“連絡先”コンポーネントを作成するルートに更新する必要があります.

export default function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" component={Home} exact />
        <Route path="/contact" component={Contact} />
        <Route path="/about" component={About} />
      </Switch>
    </BrowserRouter>
  );
}

ルートルート上の「正確な」が必要であると思われるけれども、少なくとも、私がルートを定義した順序で、上記はかなりまっすぐに見えなければなりません."/contact "は"/"で最初にマッチし、正確に指定されない限り(あるいは"/"が定義された最後のルートである場合は)連絡先ではなくホームコンポーネントを表示します.
さて、アプリケーションは上記のルートに応答しなければなりません.

ナビゲーションルーティング

リンクベースのナビゲーションのハンドルの隣にLink .

<div>
    <Link to="/">Home </Link>
    <Link to="/about">About </Link>
    <Link to="/contact">Contact </Link>
</div>

満席App.jsx 以下のようになります.

import * as React from "react";
import { BrowserRouter, Route, Switch, Link } from "react-router-dom";

import Home from "./pages/Home";
import Contact from "./pages/Contact";
import About from "./pages/About";

import "./styles.css";

export default function App() {
  return (
    <BrowserRouter>
      <div>
        <Link to="/">Home </Link>
        <Link to="/about">About </Link>
        <Link to="/contact">Contact </Link>
      </div>
      <Switch>
        <Route path="/" component={Home} exact />
        <Route path="/contact" component={Contact} />
        <Route path="/about" component={About} />
      </Switch>
    </BrowserRouter>
  );
}

私は、ルーティング部分のいくつかで彼ら自身の構成要素で遊んでみましたが、ルータの外でものを含むことを試みることのまわりでエラーを得ていました.私はこれはまだビットをリファクタリングすることができます推測しているし、好奇心旺盛な他の方法!
明らかに、上記のスタイルや何もその自然の何かを持っていません.
参考文献

Finished CodeSandbox

ReactJS documentation Function and Class Components

React Router