React Router V6でRoute.componentプロパティが動かない。Route.elementを使う

現象

下記サンプルコードでReact Routerを試してみた。
だが動かない。

index.js

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

ReactDOM.render(
  <HelloApp/>,
  document.getElementById('root')
);
reportWebVitals();

HelloApp.js

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

const HelloApp = () => (
    <Router>
      <Routes>
        <Route exact path='/' component={Home} />
        <Route path='/ja' component={HelloJapanese} />
        <Route path='/en' component={HelloEnglish} />
        <Route path='/cn' component={HelloChinese} />
      </Routes>
    </Router>
)

const Home = () => (
  <div>
    <h1>Hello App</h1>
    <p>言語を選択してください</p>
    <ul>
      <li><a href='/ja'>日本語</a></li>
      <li><a href='/en'>英語</a></li>
      <li><a href='/cn'>中国語</a></li>
    </ul>
  </div>
)

const HelloJapanese = () => (
  <div>
    <h1>こんにちは</h1>
    <p><a href='/'>戻る</a></p>
  </div>
)

const HelloEnglish = () => (
  <div>
    <h1>Hello</h1>
    <p><a href='/'>Back</a></p>
  </div>
)

const HelloChinese = () => (
  <div>
    <h1>你好</h1>
    <p><a href='/'>返回</a></p>
  </div>
)

export default HelloApp

react-router-domバージョン: v6.2.1

原因

下記を参考。

[v6] [Bug]: `` doesn't render non-`` children 揃 Issue #8033 揃 remix-run/react-router

react-router-domバージョン6ではcomponentプロパティではなくelementプロパティを使用するらしい。

解決

以下のように修正。

• component→elementに変更

• elementには関数(クラス)ではなくJSX(インスタンス)を渡す

HelloApp.js

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

const HelloApp = () => (
    <Router>
      <Routes>
        <Route exact path='/' element={Home} />
        <Route path='/ja' element={HelloJapanese} />
        <Route path='/en' element={HelloEnglish} />
        <Route path='/cn' element={HelloChinese} />
      </Routes>
    </Router>
)

const Home = (
  <div>
    <h1>Hello App</h1>
    <p>言語を選択してください</p>
    <ul>
      <li><a href='/ja'>日本語</a></li>
      <li><a href='/en'>英語</a></li>
      <li><a href='/cn'>中国語</a></li>
    </ul>
  </div>
)

const HelloJapanese = (
  <div>
    <h1>こんにちは</h1>
    <p><a href='/'>戻る</a></p>
  </div>
)

const HelloEnglish = (
  <div>
    <h1>Hello</h1>
    <p><a href='/'>Back</a></p>
  </div>
)

const HelloChinese = (
  <div>
    <h1>你好</h1>
    <p><a href='/'>返回</a></p>
  </div>
)

export default HelloApp

↓成功