javascript - 在单独的文件中声明 React 路由并导入

Question

我是 React 的新手。我一直在尝试在一个文件中声明路由，然后在另一个文件中使用它。

这是我的 routes.js

import React from 'react';

import { Route } from 'react-router-dom';
import App from './components/App';
import Template1 from './components/template1';
import Template2 from './components/template2';
import Template3 from './components/template3';

const routes = (
  <Route exact path="/" component={App}>
    <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 React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import './styles/css/index.css';
import routes from './routes.js';

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

我没有收到任何错误或警告，但页面未加载。请告诉我我缺少什么

谢谢

Answer 1

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

这是路由文件之一:

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

我希望这对某人有所帮助!干杯!