如何使用 react-routes 设置网站

Question

这几天一直在努力学习React和React-router，迷路了。我已经阅读了很多关于如何使用 react-router 的文章，阅读了他们所有的文档，但我还不能把这些点联系起来。我正在尝试设置一个包含主页、登录和关于页面的网站，应该有一个父导航栏。我有一个服务器运行 express，我希望能够在用户登录或未登录的情况下更改主页内容。我现在提供静态文件，所以应该有 index.html、about.html 和 login.html？我已经尝试了服务器端渲染的所有方法（不确定它是否是正确的方法），但所有教程都已过时并且文档似乎连接不当。

我知道应该有一个 App.js 文件、一个 routes.js 和一个客户端-side.js。这是我拥有的：

App.js

var React = require('react');
var socket = require("socket.io-client")("http://localhost:3000");

var Login = require('./Login');
var NavBar = require('./NavigationBar');
var About = require('./About');


module.exports = React.createClass({
    render: function(){
        return (
            <div>
                <NavBar />
                <Login /> --> I should put something related to routing here? The right component for the url the user typed?
            </div>
            );
    },
});

客户端-side.js

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

ReactDOM.render(<App />, document.getElementById("react-container"));

应用-server.js

var express = require("express");
var http = require('http');
var app = express();
var server = http.createServer(app).listen(3000);
var io = require('socket.io').listen(server);

app.use(express.static(__dirname + "/public"));
console.log("Server listening on http://localhost:3000");

io.on('connection', function(socket){
    console.log("Connected to Socket.io with id: %s", socket.id);
});

module.exports = server;

我已经尝试了很多东西，但并没有那么难...我只想拥有一个路由器，并且能够访问用户在服务器上尝试访问的页面...

Answer 1

找到解决方案：

app-server.js：添加了这个

app.get('*', function (request, response){
  response.sendFile(path.resolve(__dirname, 'public', 'index.html'))
});

routes.js：已添加

import React from 'react';
import { IndexRoute, Router, Route, browserHistory } from 'react-router';
import { createHistory, useBasename } from 'history'
import App from './App';
import Login from './Login';
import About from './About';

//Removes /#/k_adarwf
const history = useBasename(createHistory)({
    basename: '/'
});

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

App.js：改为

module.exports = React.createClass({
    render: function(){
        return (
            <div>
                <NavBar />
                {this.props.children}
            </div>
            );
    },
});

如何使用 react-routes 设置网站

How to setup a website using react-routes

reactjs

react-router