Wenn man in React eine URL Route mit /Page/id öffnen möchte, dann wird diese meistens nicht als Komponente erkannt, weil der Router falsch arbeitet.
Ich habe deshalb den Pfad mit /page/* angepasst, damit auch alle unterseiten weitergeleitet werden
path: '/edit/*', |
Anschliessend muss man beim laden einer Seite mit javascript die ID berechnen, was aber sehr einfach ist
componentDidMount() { //--< componentDidMount() >-- //*on loaded //< get id >* from path /article/123 var location = window.location; var path = location.pathname; //*=/article/56 var lastpos = path.lastIndexOf("/"); var id = path.substr(lastpos + 1); //< get id >
//*get data from api-controller this.populateData(id); //--</ componentDidMount() >-- } |
In der Route muss die weiterleitung mit /* eingetragen werden
import ApiAuthorzationRoutes from './components/api-authorization/ApiAuthorizationRoutes'; import { Home } from "./components/Home"; import { Articles } from "./components/Articles"; import { Article } from "./components/Article"; import { Edit } from "./components/Edit";
const AppRoutes = [
{ index: true, element: <Articles /> }, { path: '/articles', element: <Articles/> }, { path: '/article/*', element: <Article /> }, { path: '/edit/*', element: <Edit /> }, { path: '/home', element: <Home /> },
...ApiAuthorzationRoutes ];
export default AppRoutes; |
Notiz:
der Code Ansatz mit /page/:id funktioniert in react 8 irgendwie nicht.