[英]React Router not rendering any components
背景知识:我正在通过提供的一些训练营材料来学习Web开发。 通常,一切都按预期的方式运行,或者我能够纠正错误(如果有),但是无法使用此React Router。 这是相关的代码/信息:
-mainFolder
-app
-components
Chat.js
Info.js
Main.js
-config
routes.js
app.js
-node_modules
-public
bundle.js
index.html
package.json
webpack.config.js
我的package.json依赖项:
"dependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"create-react-class": "^15.6.0",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-router": "^4.1.2",
"react-router-dom": "^4.1.2",
"webpack": "^3.4.1"
}
我的app.js:
var React = require("react");
var ReactDOM = require("react-dom");
var routes = require("./config/routes");
ReactDOM.render(<routes />, document.getElementById("app"));
我的routes.js:
var React = require("react");
var createReactClass = require("create-react-class");
var router = require("react-router-dom");
var Route = router.Route;
var Router = router.Router;
var hashHistory = router.hashHistory;
var IndexRoute = router.IndexRoute;
var Main = require("../components/Main");
var Info = require("../components/Info");
var Chat = require("../components/Chat");
var routes = createReactClass({
render: function() {
return (
<Router history={hashHistory}>
<Route path="/" component={Main}>
<Route path="/info" component={Info} />
<Route path="/chat" component={Chat} />
<IndexRoute component={Info} />
</Route>
</Router>
);
}
});
module.exports = routes;
我的Chat.js,Main.js和Info.js就像我以前使用过的任何React组件一样,除了我已经开始使用
var createReactClass = require("create-react-class");
var Chat = createReactClass({ /*code */ });
而不只是“ var Chat = React.createClass({/ * code * /});” 由于React.createClass的弃用警告。 改回原样不会产生任何结果。
当我检查页面时,HTML的主体如下所示:
<body>
<!-- This is where React will deploy the contents it generates -->
<div id="app">
<routes data-reactroot=""></routes>
</div>
<!-- All of our JS code will be transpiled into this bundle.js file -->
<script src="bundle.js"></script>
</body>
有什么特别的吗? 我的Main.js中包含{this.props.children},并且我确保所有路由都以“ /”关闭。 除了这些事情,似乎没有什么是显而易见的解决办法。
还有一件事,我不得不更改routes.js文件,因为所有的路由代码都在module.exports的括号内,如下所示:
module.exports = (
<Router history={hashHistory}
...
</Router>
);
我更改了routes.js文件,以反映导出模块所知道的工作,因为我什至都找不到人们错误地使用括号的情况,更不用说以正确的方式使用括号了。 我很惊讶地发现这是相关的,但是我也应该包括所有内容,对吗? ¯\\ _(ツ)_ /¯
首先,您使用react-router v4,但代码适用于v3。 例如,v4不接受历史记录,也没有IndexRoute。 您的代码应如下所示:
import { BrowserRouter, Route, Switch } from 'react-router-dom'
....
<BrowserRouter>
<Main>
<Switch>
<Route path="/" exact component={Info} />
<Route path="/info" component={Info} />
<Route path="/chat" component={Chat} />
</Switch>
</Main>
</BrowserRouter>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.