我愿意在我的应用程序中使用React- router,并且首先尝试在文档中给出的示例,该示例已在下面复制。现在,当我转到时localhost:3000/,我按预期看到了“ App”,但是每隔一页,例如localhost:3000/inbox返回“ Cannot GET / inbox”。我在这里想念什么?
localhost:3000/
localhost:3000/inbox
var About = React.createClass({ render: function () { return <h2>About</h2>; }}); var Inbox = React.createClass({ render: function () { return <h2>Inbox</h2>; }}); var App = React.createClass({ render () { return ( <div><h1>App</h1> <RouteHandler/> </div> )}}); var routes = ( <Route path='/' handler={App}> <Route path="about" handler={About}/> <Route path="inbox" handler={Inbox}/> </Route> );
我认为问题在于您正在发出http资源请求:
GET /inbox HTTP/1.1 Host: localhost:3000
但仅使用客户端路由。您是否也打算进行服务器端渲染?您可能需要将路由器位置更改为HistoryLocation而不是HashLocation(默认)。
HistoryLocation
HashLocation
的位置道具Router.run告诉它路线要匹配的位置。如果您没有运行服务器端React,我相信您必须使用Router.HashLocation(或将其留空)。
Router.run
Router.HashLocation
否则,您将以错误的方式访问组件。尝试使用http://localhost:3000/#/inbox。熟悉React- Router可能需要一些时间,但是绝对值得!
http://localhost:3000/#/inbox
React Router文档-HashLocation