Question

我正在从2.5.1迁移到React Router 4.11。 在旧版本中，我的ISOMORPHIC / UNIVERSAL应用程序在启动时从数据库中动态检索路由/组件，我希望在4.11中保留相同的功能。

在2.5.1版本的react-router中，我能够加载路由＆amp;通过使用routes参数调用_createRouter从数据库动态生成组件，该参数是从我的db中检索到的数据：

////////////////////////
// from client entry.js
////////////////////////
async function main() {
  const result = await _createRouter(routes)
  ReactDOM.render(      
      <Provider store={store} key="provider">
        <Router history={history}>
          {result}
        </Router>
      </Provider>
    dest
 );
}

//////////////////////
// from shared modules
//////////////////////
function _createRouter(routes) {
     const childRoutes = [ // static routes, ie Home, ForgotPassword, etc];

      ////////////////////////
      // crucial part here
      ////////////////////////
      routes.map(route => {
        const currComponent = require('../../client/components/' + route.route + '.js');
        const obj = {
          path: route.route,
          component: currComponent
        };
        childRoutes.push(obj)
      });

      childRoutes.push({path: '*', component: NotFoundComponent});
      return { path: '', component: .APP, childRoutes: childRoutes };
    }

我很遗憾在4.11中找不到任何关于执行相同事件的文档。每个例子都显示硬编码的路线如下：

render() {
    return (
          <Route path='/' component={Home} />
          <Route path='/home' component={About} />
          <Route path='/topics' component={Topics} />
   )
}

对我而言，这似乎并不现实，特别是对于大型应用程序。

有没有人能指出我在2.5.1和4.11中取得同样成功的方向，因为能够动态地从数据库加载我的路线/组件？

非常感谢！

Answer 1

也许此代码是此问题的解决方案。 “动态路由导入组件”

import React, {
    Component
} from "react";

const Containers = () => ( < div className = "containers" > Containers < /div>);

class ComponentFactory extends Component{constructor(props){super(props);this.state={RouteComponent:Containers}}
    componentWillMount() {
        const name = this.props.page;
        import ('../pages/' + name + '/index').then(RouteComponent => {
            return this.setState({
                RouteComponent: RouteComponent.default
            })
        }).catch(err => console.log('Failed to load Component', err))
    }
    render() {
        const {RouteComponent } = this.state;
        return (<RouteComponent { ...this.props  }/> );
    }
}
export default ComponentFactory



 <Route path="/:page"
        render={rest => <ComponentFactory
        page={rest.match.params.page}
        {...rest}/>}/>

Answer 2

在新版本中，每条路线只是一个常规的反应组件。因此，您应该能够在创建任何其他组件时动态创建路径。

render() {
  const { routes } = this.props;

  return (
    <div>
      {
        routes.map(route => <Route path={route.path} component={route.component} />)
      }
    </div>
  );
}

在尝试渲染路线之前，您还需要动态导入组件。

React Router 4动态组件从数据库中即时加载

2 个答案: