无法让 React Router 使用这个简单的示例

Question

我已经尽可能多地尝试做与这些相同的事情 react-router examples 但没有成功。

我有这个代码：

在server.js中：

var express = require('express');

var app = express();

app.use(express.static(__dirname));

app.listen(5000, function () {
    console.log('Server listening on http://localhost:5000, Ctrl+C to stop')
});

在index.html中：

<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        <meta charset="UTF-8">
        <title>Routing</title>
    </head>
    <body>

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

并在main.js中（"browserified"并用"babelify"转换）：

import React from 'react'
import { createHistory, useBasename } from 'history'
import { Router, Route, Link } from 'react-router'

import Navbar from './components/Navbar'
import Main from './components/Main'

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

const App = React.createClass({
    render ()
    {
        return (
            <div>
                <Navbar description="Testando..." />
                <Link to="/main">Go to main</Link>
            </div>
        )
    }
});

React.render((
    <Router history={history}>
        <Route path='/' component={App}>
            <Route path='/main' component={Main} />
        </Route>
    </Router>
),
document.body);

当我点击 link Go to Main 时，我得到这个错误：Uncaught SecurityError: Failed to execute 'pushState' on 'History': A history state object with URL 'http://main/' cannot be created in a document with origin 'http://localhost:5000'.

怎么了？

P.S.: 我正在使用 React 版本 0.13.3 和 react-router 版本 1.0.0-rc1

编辑 - 10/09/2015（在@knowbody 的回答之后）

我已将 server.js 更改为：

const express = require('express')
const path = require('path')
const port = process.env.PORT || 5000
const app = express()

// serve static assets normally
app.use(express.static(__dirname))

// handle every other route with index.html, which will contain
// a script tag to your application's JavaScript file(s).
app.get('*', function (request, response){
    response.sendFile(path.resolve(__dirname, 'index.html'))
})

app.listen(port)
console.log("server started on port " + port)

编辑 - 2015 年 10 月 10 日

已从

更新index.html

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

至

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

因为我在处理包含两个段的 URL 时遇到了问题。

Answer 1

您不需要使用 useBasename。而只是使用：

let history = createHistory()

这将允许您使用 BrowserHistory。

无法让 React Router 使用这个简单的示例

Can't get React Router to work with this simple example

node.js

express

reactjs

react-router

babeljs