Question

我的反应路由器没有打开我的新闻和照片页面。当他们打开它时，应该在每个页面上显示头文件。当我尝试打开新闻页面（localhost：8080 / news）时，我的节点命令提示符中出现404 page not found错误消息。

var React = require('react');

var ReactRouter = require('react-router');

var Router = ReactRouter.Router;

var Route = ReactRouter.Route;


var browserHistory = ReactRouter.browserHistory;

var Header = require('./components/Header.jsx');

var News = require('./components/News.jsx');

var Photos = require('./components/Photos.jsx');


var Routes = (

    <Router history={browserHistory}>

        <Route path="/" component={Header}>

            <Route path="news" component={News} />

            <Route path="photos" component={Photos} />

        </Route>

    </Router>

);

module.exports = Routes;

Answer 1

这里有一个快速回答你可以对你的main.js文件做些什么。可能有更好的方法来构建代码。我建议仔细看看互联网上的更多React示例。

'use strict';

var React = require('react');
var ReactDOM = require('react-dom');
var Routes = require('./Routes.jsx');
var Header = require('./components/Header.jsx');

var Main = React.createClass({
    render: function(){
        return(
            <div>
                <Header />
                <Routes />
            </div>
        );
    }
});

ReactDOM.render(<Main />, document.getElementById('switch'));

我注意到你的代码似乎有很多重复文件的.js和.jsx。你知道你只需要一个或那个，对吗？

Answer 2

我发现我使用的是react-router v3.0，所以我卸载了它并安装了2.8.1版本。它仍然显示＃（即localhost /＃/ news），但它足够接近。谢谢你的帮助。

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

var useRouterHistory = ReactRouter.useRouterHistory;
var createHashHistory = require('react-router/node_modules/history/lib/createHashHistory');
var appHistory = useRouterHistory(createHashHistory)({
queryKey:false
});

var Header = require('./components/Header.jsx');
var News = require('./components/News.jsx');
var Photos = require('./components/Photos.jsx');

var Routes = (
<Router history={appHistory}>
    <Route path="/" component={Header}>
        <Route path="/news" component={News} />
        <Route path="/photos" component={Photos} />
    </Route>
</Router>
);
module.exports = Routes;

React路由器没有打开多个页面

2 个答案: