反应路由器不显示组件答案

【问题标题】：React-router not displaying component反应路由器不显示组件
【发布时间】：2015-11-24 10:28:58
【问题描述】：

我目前正在学习 react-router，然后尝试在示例应用中实现它。

这是我的代码：

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Sample APP</title>
        <link rel="stylesheet" href="dist/css/style.css">
    </head>

    <body>
        <div id="main"></div>
    </body>

    <script src="dist/js/main.js"></script>
</html>

/src/app.jsx

var React = require('react');
var ReactDOM = require('react-dom');

var Routes = require('./routes');

ReactDOM.render(Routes, document.getElementById('main'));

/src/routes.jsx

var React = require('react');
var Router = require('react-router').Router;
var Route = require('react-router').Route;
var Link = require('react-router').Link;

var HelloWorld = require('./components/hello-world');
var NotFound = require('./components/not-found');
var About = require('./components/about');

module.exports = (
    <Router>
        <Route path="/" component={HelloWorld}>
            <Route path="about" component={About}/>
        </Route>
    </Router>
);

/src/components/hello-world.jsx

var React = require('react');
var Link = require('react-router').Link;

module.exports = React.createClass({
    render: function() {
        return <div>
            <h1>
                Hello World !
            </h1>
            <Link to="/about">About</Link>
        </div>
    }
});

/src/components/about.jsx

var React = require('react');

module.exports = React.createClass({
    render: function() {
        return <h1>
            About
        </h1>
    }
});

package.json

{...}
"dependencies": {
    "browserify": "^9.0.3",
    "gulp": "^3.8.11",
    "gulp-concat": "^2.5.2",
    "gulp-react": "^3.0.1",
    "gulp-sass": "^2.0.1",
    "gulp-server-livereload": "^1.3.0",
    "gulp-util": "^3.0.4",
    "gulp-watch": "^4.2.4",
    "history": "^1.13.1",
    "node-notifier": "^4.2.1",
    "react": "^0.14.3",
    "react-dom": "^0.14.3",
    "react-router": "^1.0.0",
    "reactify": "^1.1.0",
    "vinyl-source-stream": "^1.1.0",
    "watchify": "^2.4.0"
}

我使用gulp 到browserify 和reactify 我的来源到/dist/js/main.js

当我点击我的about链接时，url从http://localhost:8000/#/?_k=zkmiyh变为http://localhost:8000/#/about?_k=6nhkao，但显示的组件仍然是hello-world。

我的控制台上没有显示错误。

有什么遗漏吗？

【问题讨论】：

你的代码看起来不错，如果你直接把它放在“/”下，你确定渲染正确吗？
@Mayas 是的，我尝试交换 HelloWorld 和 About 但行为是相同的：About 始终显示，无论 URL 是什么
看起来这是 react-router 的问题，这很可能会解决您的问题：... <Route path="/" component={HelloWorld}/> <Route path="/about" component={About}/> ... 即使您可能不喜欢它。
@Mayas 你说得对，它有效。看起来很奇怪，因为嵌套路由是react-router 的主要功能之一。请添加您的评论作为答案，以便我接受。我将在他们的 github repo 上发布一个问题

标签： javascript reactjs react-router react-jsx

【解决方案1】：

丑陋的解决方案是摆脱嵌套路由，如下所示：

module.exports = (
    <Router>
        <Route path="/" component={HelloWorld} />
        <Route path="/about" component={About} />
    </Router>
);

然而，我通过this doc

找到了正确的方法

我们需要另一个组件（我称之为Main），它将包含要显示的正确组件（即this.props.children）。

我使用IndexRoute 定义要显示的默认组件。

以下是更正后的代码：

/src/components/main.jsx（新）

var React = require('react');

module.exports = React.createClass({
    render: function() {
        return <div>
            // this is where you can add header
            {this.props.children}
            // this is where you can add footer
        </div>
    }
});

/src/routes.jsx（修改）

var React = require('react');
var Router = require('react-router').Router;
var Route = require('react-router').Route;
var IndexRoute = require('react-router').IndexRoute;

var Main = require('./components/main');
var HelloWorld = require('./components/hello-world');
var About = require('./components/about');

module.exports = (
    <Router>
        <Route path="/" component={Main}>
            <IndexRoute component={HelloWorld} />
            <Route path="about" component={About} />
        </Route>
    </Router>
);

【讨论】：

嘿！您链接到的文档不存在。您能否链接到相关文档。我被困在这里。 :(
@phoenix 我在回答中更新了the link。

【解决方案2】：

我的 APP 中也有同样的问题我已经更改了父节点并设置为相同的节点，然后它正在工作可能对你有帮助

module.exports = (
<Router>
    <Route path="/" component={HelloWorld} />
    <Route path="about" component={About}/> 
</Router>

);

【讨论】：

仅供参考，我想出了一个比您使用的更好的解决方案。查看我添加的答案以获取更多信息。

【解决方案3】：

module.exports = (
    <Router>

        <Route path="/"> 
           <HelloWorld/> 
        </Route>

        <Route path="about"> 
           <About/>
        </Route>

    </Router>
);

这可能会帮助您检查一下。

【讨论】：

这与 pistou 的回答有何不同？