2016-08-03 3 views
0

У меня есть следующие конфигурации для моих маршрутов:Реагировать маршрутизатор: некоторые внутренние ссылки повторно загрузить приложение

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

В MyJobsTabAccepted У меня есть ссылки на pro-job маршрута, определяемые как:

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

Когда Я нажимаю на эту ссылку, страница снова загружается, и приложение перезапускается. Я не могу найти способ исправить это.

Я использую use-named-routes, который хорошо работает в остальной части приложения.

Link Компонент Link создан в компоненте, который по другим причинам также обернут withRouter.

По какой-то причине эти ссылки создаются в «строитель-скрытый» DIV и переехал, когда мне нужно с помощью функции наблюдения:

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

Похоже реагировать ничего о них не знает, и поэтому они обрабатываются как обычные ссылки.

ответ

0

Попробуйте положить / перед вашим путем. Например, /mypath.

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

О, я вижу проблему! переместить эти ссылки с помощью этой функции: _moveItems() { _.forEach (this.builder.children, с => { this.container.appendChild (c.cloneNode (истина)) }) } –

0

Проблема связана с перемещением.

cloneNode не клонирует eventHandlers элементов узла, поэтому полностью теряю функциональность моих компонентов.