您不需要将 Routes 包装在 div 中。尝试这样的事情：

路由.js

import React from 'react';
import { Router, Route } from 'react-router';
import { Template1, Template2, Template3 } from './templates';

const createRoutes = () => (
    <Router>
      <Route exact path="/sessionstate1" component={Template1}/>
      <Route exact path="/sessionstate2" component={Template2}/>
      <Route exact path="/sessionstate3" component={Template3}/>
    </Router>
);

export default createRoutes;

索引.js

import ReactDOM from 'react-dom';
import createRoutes from './routes';

const routes = createRoutes();

ReactDOM.render(
  routes,
  document.getElementById('root')
);

索引.js：

import LoginRoutes from './login/routes'

let routeConfig = [];
routeConfig = routeConfig.concat(LoginRoutes(store));

<Router routes={routeConfig}/>

路线.js：

export default (store) => {

    return [
        {path: '/login', component: Login},
        {path: '/signup', component: SignUp},
    ]
}

通过这种方式，您可以添加来自不同文件的路线，并将您的路线定义传播到为路线提供上下文目的的不同文件夹。

如果您想使用 redux 并希望在路线上有一个 onEnter 事件，那么 store 变量就在那里。例子：

export default () => {

    const sessionEnter = (location) => {
        let {appId} = location.params;

        store.dispatch(loadApp(appId));

    return [
        {path: '/apps/:appId', component: App, onEnter: sessionEnter},
    ]
}

我发现 onEnter 事件是 componentDidMount 的一个很好的替代方案，在数据获取方面。在路由级别调用数据获取对我来说更有意义，因为我将组件视为表示级别的一部分。

好吧，几天前我遇到了同样的问题，而我的解决方案是这样的......

这是路由文件之一：

import React from 'react';
import { Route } from 'react-router-dom';
import { ComponentY } from '../components/functionalitys';

export default [
  <Route path="/appointment" component={ComponentY} exact key="create" />,
];

这是另一个路由文件：

import React from 'react';
import { Route } from 'react-router-dom';
import { LoginPage, Register } from '../components/user';

export default [
  <Route path="/register" component={Register} exact key="create" />,
  <Route path="/login" component={LoginPage} exact strict key="login" />
];

这就是我在主 app.js 中导入的方式：

import routesFromFile1 from './the/route';
import routesFromFile2 from './the/other/route';

class App extends Component{
  render(){
    return(
       <div className="wrapper">
           <section className="content container-fluid">
              <Switch>  
                <Route exact path="/" component={Home} strict={true} exact={true}/>
                <Route path="/500" component={InternalServer} />
                {routesFromFile1}
                {routesFromFile2}
              </Switch>
            </section>
          </div>
        )
    }
}

我希望这有助于某人！干杯！！

我认为这个问题是包裹Route内div。尝试将它们包装在Route如下类似的内容中。试试这个小提琴并将路由包装器更改为 div。

const routes=(
      <Route >
        <Route exact path="/sessionstate1" component={Template1}/>
        <Route exact path="/sessionstate2" component={Template2}/>
        <Route exact path="/sessionstate3" component={Template3}/>
      </Route >
)
export default routes;

并将其导入 index.js

import routes from './routes.js';

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