react-routerで表示するページ内に別ページへのリンクを貼りたい

Question

お世話になります。

react-router@v4を使って、SPAを実装しています。

基本的なことで恐縮ですが、ご教示をお願い足します。

src配下は下記を入れています。
App.js　（←react-routerの処理を下記のように書いています。）
Page1.js
Page2.js
Page3.js
Page4.js

▼App.js

＝＝＝＝＝＝ code(抜粋) start ＝＝＝＝＝＝

import React from 'react'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

import Page1 from ‘./Page1’
import Page2 from ‘./Page2’
import Page3 from ‘./Page3’

const App = () => {
return (
<Router>
<div>
<Link to='/'><button> ページ1 </button></Link>
<Link to=‘/page2’><button> ページ２ </button></Link>
<Link to=‘/page3’><button> ページ３ </button></Link>

<Route exact path='/' component={Page1} />
<Route path=‘/page2’ component={Page2} />
<Route path=‘/page3’ component={Page3} />
  </div>
</Router>

)
}

export default App

＝＝＝＝＝＝ end ＝＝＝＝＝＝

通常のルーティングはできました。

次にやりたいこととしては
Page1内に、Page4へのリンク（<a>または<button>を設置）を作りたいと考えています。

この場合の記述の仕方をご教示いただけますでしょうか？

何卒よろしくお願い足します。

Answer 1

import React, { Component } from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';

const Page1 = () => {
  return (
    <div>
      <h1>Page1</h1>
      <nav>
        <ul>
          <li><Link to='/page2'><button> ページ2 </button></Link></li>
          <li><Link to='/page3'><button> ページ3 </button></Link></li>
        </ul>
      </nav>
    </div>
  )
}

const Page2 = () => {
  return (
    <div>
      <h1>Page2</h1>
      <nav>
        <ul>
          <li><Link to='/'><button> ページ1 </button></Link></li>
          <li><Link to='/page3'><button> ページ3 </button></Link></li>
        </ul>
      </nav>
    </div>
  )
}

const Page3 = () => {
  return (
    <div>
      <h1>Page3</h1>
      <nav>
        <ul>
          <li><Link to='/'><button> ページ1 </button></Link></li>
          <li><Link to='/page2'><button> ページ2 </button></Link></li>
        </ul>
      </nav>
    </div>
  )
}

const App = () => (
  <Router>
    <Switch>
      <Route exact path='/' component={ Page1 } />
      <Route path='/page2' component = { Page2 } />
      <Route path='/page3' component = { Page3 } />
    </Switch>
  </Router >
);

render(<App />, document.getElementById('root'));

https://codesandbox.io/s/91z28vn5p4

参考

以下のページを参考に質問文のコードをフォーマットして下さい。
質問するときのヒント

Comments

[gksh7]

ありがとございます。
ご丁寧に、コードを書いてくださったので、大変大変助かりました。
おかげさまで、書いてくださったコードをヒントにやりたいことが実現できました！

まだまだReactは初心者で難しい案件(あくまで自分にとってはですが)に四苦八苦しております。
引き続きお世話になることがあるかもしれませんが、何卒よろしくお願いいたします。

「質問するときのヒント」も今後はきちんと理解して、分かりやすい質問を心がけます。
ありがとうございました。

[HayatoKamono]

どういたしまして！