【React】ページURLはルーターで

HTMLとかPHPでやるときは、会社概要→about.htmlとかabout.phpのファイルを作ったりすることが多いですよね！
WPでも動的だけど、テンプレとかページで作ったりするので直感的に今どこのページ触ってるとかがわかるんですが
リアクトはそれがない！
コンポーネントの入れ替えでページを表示するので当然らしいのですが、目で見えないのでどうすればいいかめっちゃ迷いました。

React Routerで擬似的にURLを割りふる

React Routerというプラグインをnpmでインストールして擬似的にURLを作れるようにするんですね、これを使うと
参照するファイルを指定できるので、今までみたいにページごとのファイル作って作業できるんで安心できるという寸法です。
当たり前のことですが、気づくまでの手探り感が怖いです。

やり方

最初に生成されるsrcの中にあるapp.jsに書きます。
先にHOMEはどこにある、などのファイルの場所を定義してelementで教える感じです。
Route path={`/`}に好きなURLを、element=に読み込みたいファイルを書いたら繋がります。

    //まずはコマンドでインストール
$ npm install react-router-dom
    

     

//react-router-domを読み込む
import {BrowserRouter, Routes, Route} from "react-router-dom"

//ページのファイルがどこにあるか教えてあげる
import Home from "./view/Home";
import Works from "./view/Works";
import About from "./view/About";
import Memorandam from "./view/Memorandam";



const App = () => {
    return (
        <BrowserRouter basename="react"> 
            <ScrollTop/>
            <Routes>
                <Route path={`/`} element={<Home/>}/>
                <Route path={`/works/`} element={<Works/>}/>
                <Route path={`/about/`} element={<About/>}/>
                <Route path={`/memorandam/`} element={<Memorandam />}/>
            </Routes>
        </BrowserRouter>
    );
};
    

リンクの書き方

reactではhtmlが使えるので、リンクにaタグをつかえるんですが
ルーターで作ったURLにつなぐにはaではできないのでLinkタグで書きます。

    
<Link to={`/contact/`} className="btns1">お見積り・お問い合せ<i><FaTelegramPlane/></i></Link>
<Link to={`/`} className="btns1">TOP PAGE<i><FaHome/></i></Link>
    

• 後は試して時間をかけるだけ、非常にイージーです