本文介绍了在单独的文件中声明 React 路由并导入的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我是 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 missingThanks
推荐答案
您不需要将 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 路由并导入的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!