ブラウザURL欄の直接入力対策で別ページに飛ばす方法。

2024.06.29

例えばポートフォリオサイトを作る場合。

下記のようにReactのルートパラメータの設定で個々の作品の詳細ページが作成したとします。

  • http://localhost:3000/work/aaa
  • http://localhost:3000/work/bbb
  • http://localhost:3000/work/ccc

詳細ページが表示ができるようになったのはいいけど、「http://localhost:3000/work/」にはブラウザURL欄直入力で飛んで欲しくない場合ですね。

今回自分はポートフォリオサイトを作っていて、トップページ上にwork一覧のリンクを載せて、そこからwork詳細ページに飛ぶようにしていました。

workの一覧ページは必要なかったのです。

別ページへの飛ばし方：Navigateを使う

やり方はとっても簡単です。Route情報を設定しているファイルでNavigateをインポートします。

import {  Navigate } from 'react-router-dom';

次に対策したいURLに対して飛ばす先のリンクを設定します。

今回は「/work」に入ろうとしたらトップページ「 / 」に飛ばすようにします。

<Route path="/work" element={<Navigate to="/" />} /> {/* リダイレクトを追加 */}

これだけでOKです！

ルート設定jsファイルのサンプルはこちらです。簡単ですね！

import { Route, createBrowserRouter, createRoutesFromElements, Navigate } from 'react-router-dom';
import TopPage from './pages/TopPage';
import WorkDetail from './components/work/WorkDetail';
import RouterNav from './components/RouterNav';

const routesLink = createBrowserRouter(
  createRoutesFromElements(
    <Route element={<RouterNav />}>
      <Route path="/" element={<TopPage />} />
      <Route path="/work" element={<Navigate to="/" />} /> {/* リダイレクトを追加 */}
      <Route path="/work/:id" element={<WorkDetail />} />
    </Route>
  )
);

export default routesLink;
一覧ページに戻る
totop Page Top