Readdy Write  
0,00 €
Your View Money
Views: Count
Self 20% 0
Your Content 60% 0

Users by Links 0
u1*(Content+Views) 10% 0
Follow-Follower 0
s2*(Income) 5% 0

Count
Followers 0
Login Register as User

Gelöst: React Seite mit ID in Route match öffnen

02.01.2023 (👁3056)


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() >--

    }



Ein Bild, das Text, Screenshot, Computer enthält.

Automatisch generierte Beschreibung

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.