Javascript 反应路由器不显示组件

我目前正在学习react路由器，然后尝试在示例应用程序中实现它

这是我的密码：

index.html

/src/routes.jsx

我使用

gulp

来

browserify

和

reactify

将我的源代码转换成

/dist/js/main.js

当我点击我的

about

链接时，url从

http://localhost:8000/#/?_k=zkmiyh

至

http://localhost:8000/#/about?_k=6nhkao

但显示的组件仍然是

hello world

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

---

有什么遗漏吗？

我的应用程序中也有同样的问题，我已经更改了父节点并设置为相同的节点，然后它工作了，可能会对您有所帮助

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

module.exports=(

))

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

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

/src/routes.jsx（已修改）

var React=require（'React'）；
var-Router=require（'react-Router'）。路由器；
var Route=require（'react-router'）。路由；
var IndexRoute=require（'react-router'）。IndexRoute；
var Main=需要（'./组件/Main'）；
var HelloWorld=require（“./components/HelloWorld”）；
变量About=需要（'./组件/About'）；
module.exports=(
);

module.exports=(
);

---

这可能有助于您检查。

您的代码看起来不错，如果您直接将其置于“/”下，您是否确保渲染正确？@可能是的，我尝试过交换

HelloWorld

和

about

，但行为相同：

about

始终显示，无论URL看起来这是react路由器的问题，这很可能会解决您的问题：

即使你可能不喜欢它。@也许你是对的，它也能工作。似乎有些奇怪，因为嵌套路由是
react路由器的主要功能之一。请添加您的评论作为答案，以便我可以接受。我会在他们的github repoFYI上发布一个问题，我找到了一个比你使用的更好的解决方案。查看我添加的答案以了解更多信息。嘿！您链接到的文档不存在。你能链接到相关的文档吗。我被困在这里了（@phoenix我在我的答案中更新了。这与pistou的答案有什么不同？
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>
);

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>
    }
});

var React = require('react');

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

{...}
"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"
}

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

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

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>
    }
});

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>
);

module.exports = (
    <Router>

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

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

    </Router>
);