ヘッダーのフッター

典型的なウェブサイトのことを考えると、通常は上部にあるヘッダーで最も高いレベルでスタイルをとっています.次に、メインのセクション、次に下部のフッター.さらに、ヘッダーとフッターは通常、サイトの周りを移動し、重要なナビゲーションリンクを含むように一定のままです.反応して、我々は「反応ルータDOM」ライブラリを使用してクライアント側ルーティングを提供することができます、しかし、この構造を保つことは少しの余分の考えをとります.

反応ルータDOMライブラリの使用

私たちを始めるために、我々は反応ルータDOMの基本的な実装を理解する必要があります.これは一般的に“index . js”というルートファイルで実装されます.最初にライブラリをインポートするには、基本的なルーティング機能に必要なライブラリから3つの機能があります.今、私たちはトップレベルのレンダリングコンポーネントをネストする必要があります.これは、コンポーネント間のルートに我々の能力を与えるものです.

// index.js
import {BrowserRouter, Route, NavLink} from 'react-router-dom';
import Main from './Components/Structure/Main';

ReactDOM.render(
  <React.StrictMode>
      <BrowserRouter>
        <Main />
      </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

ルートを提供するために、我々は反応ルータDOMライブラリからルート機能を使用します.それぞれのルートでURLパスを指定し、そのパスがアクティブなときにどのコンポーネントをレンダリングするかを指定します.デモにいくつかの追加ルートを作りましょう.

// index.js
import {BrowserRouter, Route, NavLink} from 'react-router-dom';
import Main from './Components/Structure/Main';
import About from './Components/About/About';
import Blog from './Components/Blog/Blog';

      <BrowserRouter>
        <Route exact path="/" component={Main} />
        <Route exact path="/home" component={Main} />
        <Route exact path="/about" component={About} />
        <Route exact path="/blog" component={Blog} />
      </BrowserRouter>

ここで、ユーザーがルートURL "/"または"/home "に移動した場合、メインのコンポーネントが表示されます.ユーザーが"/about "に移動すると、代わりに"about "という新しいコンポーネントが表示されます.新しいコンポーネントをインデックスにインポートする必要があります.JSファイルは、それらを利用できるように.
ユーザーがナビゲートする能力を提供するために、それぞれの利用可能なルートにNavinkを設定したいです.各Navlinkには、リンクをクリックしたときに移動するURLを指定する“to”属性があります.また、スタイリングを追加したい場合もあります.<NavLink to="/" exact style={Link} activeStyle={{background: "darkgreen"}}>Home</NavLink> .私はNavbarと呼ばれる別のコンポーネントで私のリンクを設定してすべてを分離し、きれいに保つので、今私は単にインデックスにNavbarをインポートすることができます.jsとルータにコンポーネントを追加する(Navlinksはルータの外で動作しないため)、それは我々の基本的な実装を完了します.注意Navbarはルートの中に含まれません、これは我々がURLに関係なく現れて欲しいので、それです.今、ユーザーは、クリックすると、サイトのさまざまな部分に移動するリンクが表示されます.

// index.js
      <Router>
        <Navbar />
        <Route exact path="/" component={Main} />
        <Route exact path="/home" component={Main} />
        <Route exact path="/about" component={AboutContainer} />
        <Route exact path="/blog" component={BlogContainer} />
      </Router>

ヘッダー/フッターの追加

ヘッダーとフッターを加えるために、我々が本当にする必要があるすべては、彼らがURL経路に依存していないので、ルータの外でコンポーネントを適所に加えることです.しかし、Navbarがヘッダーから別に描かれるので、それはカスタムスタイリングなしでページでファンキーに見えます.

それで、これをきれいにするために、我々はインデックスからNavbarを引くつもりです.JSとヘッダコンポーネントに追加します.Navbarのように、我々はルートの中でそれを含みません.また、私たちのナビリンクを含んでいるので、ヘッダーコンポーネントをルータに動かす必要があります.
現在、あなたのフッターをあなたのページの底にとどめるために、CSSトリックがたくさんあります.私が私のアプリでそれを実装した方法は次のとおりですが、他の方法も自由に調べてください.

/* Set your default so that the sizing and placement is predictable */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

/* Everything is a child of this node, so set its height to take up the full page or more, then set some padding at the bottom so your footer can slip into the gap. */
#root {
  position: relative;
  min-height: 100vh;
  padding-bottom: 20px;
}

.Header {
 position: relative;
 height: 100px;
 width: 100%;
}

.Main {
  text-align: center;
  position: relative;
}

/* Now set the height of your Footer equal to the padding that you left for it in your #root.  To make it stay at the bottom, you will set it to be absolutely positioned.  If Main grows larger, your Footer will move down to remain at the bottom of the page. */ 
.Footer {
  height: 20px;
  width: 100%;
  position: absolute;
  bottom: 0;
}

そして、我々はしました！

現在、私たちはページの上部に一定のヘッダーを持ちます.そして、それは我々のNavlinks、中央の我々のURL依存する内容と底の一定のフッターを含みます.

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router, Route, NavLink, Redirect, Switch} from 'react-router-dom';
import Header from './Components/Structure/Header';
import Main from './Components/Structure/Main';
import Footer from './Components/Structure/Footer';
import AboutContainer from './Components/About/AboutContainer';
import BlogContainer from './Components/Blog/BlogContainer';

ReactDOM.render(    
  <Router>
    <Header/>
      <Route exact path="/" component={Main} />
      <Route exact path="/home" component={Main} />
      <Route exact path="/about" component={AboutContainer} />
      <Route exact path="/blog" component={BlogContainer} />
    <Footer/>
  </Router>
  document.getElementById('root')
);

// Header.js
import React from 'react';
import Navbar from './Navbar';

const Header = () => {
  return (
    <div className="Header">
      <Navbar />
    </div>
  )
}

export default Header;