Question

有没有办法扩展已经托管的一个应用程序的react-router？我想在链接的点击上注入额外的路线，这允许我注入脚本或允许我包含我的javascript。

最终我正在寻找两个不同的反应应用程序，它们具有一个构建和部署周期，但彼此相互关联。

实施例。有一个abc.com，点击一个链接（即abc.com/nepage），整个页面重新加载相同的内容[即说标题页脚]由不同的团队维护，所有人都有一个构建和部署周期。

即使我们有不同的构建和部署过程，我也希望应用程序能够与SPA一起使用。

这是在Backbone.Router.extend的帮助下使用Backbone实现的，在点击链接时，新页面的默认路由器被所有新的路由器覆盖，并用于填充上述路径中的支持文件特定的路由器

Answer 1

使用PlainRoutes，子路由可以按需加载（当用户输入路由时）并异步解析。考虑到这一点，您可以在diferente文件中使用与这些路由相对应的Webpack chunks to split the code。更进一步，你可以在Webpack上使用multiple entrypoints，使用户只加载影响当前页面的应用程序部分。

示例应用：

index.js：

import React from 'react'
import ReactDOM from 'react-dom'
import { Router, browserHistory } from 'react-router'

const App = ({ children }) => {
  <div>
    <nav>Your navigation header</nav>
    { children }
    <footer>Your app footer</footer>
  </div>
}

const HomePage = () => <p>Welcome!</p>

const routes = {
  path: '/',
  component: App,
  indexRoute: { component: HomePage },
  getChildRoutes (partialNextState, cb) {
    require.ensure([], (require) => {
      cb(null, [
        require('./routes/about'),
        require('./routes/blog'),
        require('./routes/contact'),
      ])
    })
  }
}

ReactDOM.render(
  <Router history={ browserHistory } routes={ routes } />,
  document.getElementById('container')
)

路由/ about.js：

import React from 'react'

const About = () => <p>About page</p>

export default {
  path: 'about',
  component: About
}

其他路线可能与上面显示的路线类似。

在飞行中扩展存在的应用程序的React路由器

1 个答案:

示例应用：