Question

一些背景知识：我正在通过提供的一些训练营材料来学习网页开发。通常一切都按照预期的方式工作，或者我能够纠正错误（如果有的话），但不能使用这个React路由器。这是相关的代码/信息：

-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文件以反映我所知道的用于导出模块的工作，因为我甚至找不到任何人误用括号的情况，更不用说以正确的方式使用括号了。我很惊讶地发现这是相关的，但我可能还包括一切，对吧？ ¯\ _（ツ）_ /¯

Answer 1

首先，您使用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>

React Router不呈现任何组件

1 个答案: