Reagieren Router: einige interne Link-Wieder laden Sie die App

Question

Ich habe folgende Konfiguration für meine Routen:

import React from 'react' 
import {Route, IndexRedirect} from 'react-router' 

import MainView from '../pages/pro/main' 
import MyJobsListView from '../pages/pro/my-jobs' 
import MyJobsTabAccepted from '../pages/pro/my-jobs/tabs/Accepted' 
import MyJobsTabLeads from '../pages/pro/my-jobs/tabs/Leads' 

import JobView from '../pages/pro/job' 
import JobViewTabQuote from '../pages/pro/job/tabs/Quote' 

const jobRoutes = (
    <Route name='pro-job' path=':jobUuid' component={JobView}> 
    <Route name='pro-job-messages' path='messages' /> 
    <Route name='pro-job-quote' path='quote' component={JobViewTabQuote} /> 
    <IndexRedirect to='messages' /> 
    </Route> 
) 

const jobsRoutes = (
    <Route component={MyJobsListView}> 
    <Route 
     name='pro-jobs-accepted' 
     path='accepted' 
     component={MyJobsTabAccepted} 
     /> 
    <Route 
     name='pro-jobs-leads' 
     path='leads' 
     component={MyJobsTabLeads} 
     /> 
    </Route> 
) 

export default (
    <Route component={MainView}> 
    <Route name='pro-jobs' path='my-jobs'> 
     {jobsRoutes} 
     {jobRoutes} 
     <IndexRedirect to='accepted' /> 
    </Route> 
    <IndexRedirect to='my-jobs' /> 
    </Route> 
) 

In MyJobsTabAccepted Ich habe Links zu pro-job Weg, wie folgt definiert:

<Link 
    className={className} 
    to={{ 
    name: 'pro-job', 
    params: {...routerUtils.getParams().toJS(), jobUuid: job.uuid}, 
    }} 
    > 
    {job.uuid} 
</Link> 

Wenn Ich klicke auf diesen Link, die Seite wird erneut heruntergeladen und die App wird neu gestartet. Ich kann keinen Weg finden, das zu beheben.

Ich verwende use-named-routes, die im Rest der Anwendung gut funktioniert.

Die Link Komponente wird in einer Komponente erstellt, die aus mehreren Gründen auch mit withRouter verpackt ist.

Aus irgendeinem Grunde diese Links in einem „Baumeister versteckt“ div erstellt und bewegt werden, wo ich mit der Follow-Funktion benötigen:

_moveItems() { 
    _.forEach(this.builder.children, c => { 
     this.container.appendChild(c.cloneNode(true)) 
    }) 
    } 

Es ist wie weiß nichts über sie sieht reagieren und sie so werden wie normale Links behandelt.

Answer 1

Versuchen Sie / vor Ihrem Weg zu setzen. Zum Beispiel /mypath.

<Link to="/mypath">My path</Link> 

Answer 2

Das Problem liegt an den moveItems.

cloneNode klont die eventHandlers der Knotenelemente nicht, so dass ich komplett die Funktionalitäten meiner Komponenten verliere.