v5 以前から React-Router-Dom v6 への移行

今日、私は 2021 年に作成された React のチュートリアル (私は React を初めて使用します) に従っていました.React Router をインストールして追加したところ、次のエラーが発生していることに気付きました.
Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.
オンラインで調べたところ、チュートリアルは React-Router-Dom v5 で作成されており、インストールしたバージョンはバージョン 6 であることがわかりました.

数時間の調査とデバッグの後、すべてを機能させることができました.

元のコードは次のようになります.

import React from 'react';
import { Container } from 'react-bootstrap';
import { BrowserRouter as Router, Route} from 'react-router-dom'
import Footer from './components/Footer';
import Header from './components/Header'
import HomeScreen from './screens/HomeScreen';
import ProductScreen from './screens/ProductScreen';

function App() {
  return (
    <Router>
      <Header />
      <main className='py-3'>
        <Container>
          <Route path='/' component={HomeScreen} exact />
          <Route path='/product:id' component={ProductScreen} />
        </Container>
      </main>
      <Footer />
    </Router>
  );
}

export default App;

ただし、React Router の新しいバージョンでは、すべての <Route /> コンポーネントを <Routes /> コンポーネントにラップする必要があります (<Switch /> コンポーネントを置き換えます).

Route コンポーネントについては、<Route path='/' component={HomeScreen} exact/>
<Route path='/product:id' component={ProductScreen} />
に
<Route path='/' element={<HomeScreen />} />
<Route path='product/:id' element={<ProductScreen />} />
2 番目のステートメントの先頭のスラッシュが削除され、コロン (":") の前にスラッシュが付けられていることを確認してください.さらに、 element の代わりに component があり、ルートが指しているコンポーネントの名前を入力するだけでなく、レンダリングしているかのように記述します ( <ProductScreen /> など).
もう 1 つ注意すべき点は、Route パスがデフォルトで正確に一致するため、exact プロパティを再度指定する必要がないことです.

また、URL のパラメーターにアクセスする場合は、「react-router-dom」から useParams をインポートする必要があります.

それは今のところすべてです!これを読んで楽しんでいただければ幸いです.

詳細については、 here または here をクリックしてください.