在单独的文件中声明 React 路由并导入 [英] Declaring React Routes in a separate file and Importing

问题描述

我是 React 的新手我一直在尝试在单独的文件中声明路由，然后在索引文件中使用它.这是我的 routes.js.

I am new to React I have been trying to declare routes in separate files and then use it in index file. Here is my routes.js.

import React from 'react';
import ReactDOM from 'react-dom';
import {
  BrowserRouter as Router,
  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,
  Route,Redirect
} from 'react-router-dom';
import './styles/css/index.css';
import routes from './routes.js';

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

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

I am not getting any errors or warning but the page is not loading. Please tell me what i am missing Thanks

推荐答案

您不需要将 Route 包装在 div 中.尝试这样的事情:

You don't need to wrap your Routes inside a div. Try something like this:

routes.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;

index.js

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

const routes = createRoutes();

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

这篇关于在单独的文件中声明 React 路由并导入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！