React Routerの基本的なボイラープレート/テンプレートコード

ルートコンポーネントのセットアップ:

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import NotFound from './components/NotFound';
const App = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route component={NotFound} />
      </Switch>
    </BrowserRouter>
  );
};
export default App;

ルートコンポーネント内でのナビゲーションの設定:

import React from 'react';
import { Link } from 'react-router-dom';
const Navigation = () => {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>
    </nav>
  );
};
export default Navigation;

ルートコンポーネント以外のコンポーネントでのルーティングの利用:

import React from 'react';
import { Redirect } from 'react-router-dom';
const ProtectedRoute = ({ component: Component, isAuthenticated, ...rest }) => {
  return (
    <Route
      {...rest}
      render={(props) =>
        isAuthenticated ? (
          <Component {...props} />
        ) : (
          <Redirect to="/login" />
        )
      }
    />
  );
};
export default ProtectedRoute;

プログラムでのルーティングの実行:

import { useHistory } from 'react-router-dom';
const MyComponent = () => {
  const history = useHistory();
  const handleClick = () => {
    history.push('/about');
  };
  return (
    <button onClick={handleClick}>Go to About</button>
  );
};

これらはReact Routerの基本的な使用例です。これらのコードをベースにカスタマイズし、アプリケーションのニーズに合わせてルーティングを設定できます。詳細なドキュメントやチュートリアルは、React Routerの公式ウェブサイトで入手できます。

以上が、React Routerの基本的なボイラープレート/テンプレートコードに関する説明とコード例です。