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

时间:2015-10-07 14:24:22

标签: node.js express reactjs react-router babeljs

我尽可能多地尝试在这些react-router examples中做同样的事情,但没有让它发挥作用。

我有这段代码:

j

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> (“浏览器化”并使用“babelify”转换):

main.js

当我点击链接转到Main时,我收到此错误: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);

怎么了?

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

编辑 - 2015年9月9日(在@knowbody的回答之后)

我已将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'.更改为:

server.js

编辑 - 2015年10月10日

更新了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)
index.html

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

因为我遇到了有两个网段的网址问题。

1 个答案:

答案 0 :(得分:1)

您无需使用useBasename。而只是使用:

let history = createHistory()

这样您就可以使用BrowserHistory