React router v6 éprouve une page blanche sur les itinéraires

Question

Mis à jour de "react-router-dom": "^5.1.2" à "react-router-dom": "^6.3.0"
L'application a quelques Context.Providers juste à l'extérieur de BrowserRouter, une route 404, et quelques routes imbriquées implicites pour quelques pages (indiquées par chemin pas chemin exact)

code:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import { BrowserRouter, Routes, Route } from "react-router-dom";

ReactDOM.render(
        ,
    document.getElementById('root')
    );

./components/App.js

import React, { useState } from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import TierA from "./TierA"
import TierB from "./TierB"
import Catalogue from "./Catalogue"
import Admin from "./Admin"
import NotFound from "./NotFound" // this is the 404 page component

import PlayerContext from "./Player/context"
import SearchContext from "./Search/context"
import { useSearch } from "../hooks/useSearch"

const App = () => {

    const searchText = useSearch()
    const [playerItem, setPlayerItem] = useState(null)

    return (

    )
}

export default App;

Avant la mise à jour vers react-router-dom v6, l'ancienne version avait l'habitude de rendre la page 404 en atteignant la route de base / et les routes nommées rendaient correctement.
Maintenant, en atteignant l'une des routes ci-dessus affiche une page blanche, aucune mise en garde ou erreur ne ressort dans la console Veuillez conseiller, merci d'avance

fonctionne avec npm start

"scripts": {
    "start": "react-scripts start",
...

Answer 1

Dans react-router-dom@6, l'API/syntaxe du composant Route a changé de manière significative. La propriété element prend un ReactNode, alias JSX. Transmettez les composants React en tant que JSX.

Exemple:

    } path="/a_tier" />
    } path="/b_tier" />
    } path="/catalogue" />
    } path="/admin" />
    } path="*" />