https://youtu.be/8JpU_6bB_m8
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
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.