react-router-domを使用してルーティング – 【React】 | 株式会社CONFRAGE ITソリューション事業部

react-router-domを使用してルーティング – 【React】

react-router-domを使用してルーティング – 【React】

前提

項目	内容
React	v18.2.0

ルーティング

Reactはルーティング機能がありませんが、react-route-domモジュールを使ってルーティングすることができます。

$ npx create-react-app react-route-test --template typescript
$ npm i react-router-dom

src配下にAbout.tsxを作成します。

About.tsx

function About() {
  const title: string = "概要";

  return (
    <div className="About">
      <h1>{title}</h1>
    </div>
  );
}
export default About;

index.tsxでルーティングします。

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

↓

import React from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
// add start
import About from './About';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
// add end

// modify start
const container = document.getElementById('root')
const root = createRoot(container!);
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path='/' element={<App />} />
        <Route path='/about' element={<About />} />
      </Routes>
    </BrowserRouter>
  </React.StrictMode>,
  
);
// modify end

reportWebVitals();

App.tsxを編集します。react-router-domのLinkを使用して/aboutのリンクを作成します。

// add start
import { Link } from "react-router-dom";
// add end
import './App.css';

function App() {
  const title: string = "ルーティング";
  return (
    <div className="App">
      <h1>{title}</h1>
      <Link to='/about'>
        ボタン
      </Link>
    </div>
  );
}

export default App;