Question

我的路线配置如下：

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组件是在一个组件中创建的，出于更多原因，该组件也包含withRouter。

出于某种原因，这些链接是在“builder-hidden”div中创建的，并使用follow函数移动到我需要的位置：

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

看起来反应对他们一无所知，因此他们被视为普通链接。

Answer 1

尝试将/放在路径之前。例如/mypath。

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

Answer 2

问题是由于moveItems。

cloneNode不会克隆节点元素的eventHandlers，因此我完全失去了组件的功能。

React Router：一些内部Link重新下载App

2 个答案: