反应路由器“无法获取/*"；除了根网址

反应路由器

关注

发信

关注(28)粉丝(399)

反应路由器“无法获取/*"；除了根网址

本文介绍了反应路由器“无法获取/*"；除了根网址的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我愿意为我的应用程序使用 React-router，并且我正在尝试文档中给出的示例首先，我在下面复制了它.现在，当我转到 localhost:3000/ 时，我会按预期看到App"，但其他所有页面，例如 localhost:3000/inbox 都会返回Cannot GET/inbox".我在这里错过了什么?

var About = React.createClass({渲染:函数(){返回<h2>关于</h2>;}});var Inbox = React.createClass({渲染:函数(){返回<h2>收件箱</h2>;}});var App = React.createClass({使成为 () {返回 (<div><h1>App</h1><RouteHandler/>

)}});无功路线 = (<Route path='/' handler={App}><Route path="about" handler={About}/><Route path="inbox" handler={Inbox}/></路线>);

解决方案

我认为问题在于您正在发出 http 资源请求:

GET/inbox HTTP/1.1主机:本地主机:3000

但只使用客户端路由.您是否也打算进行服务器端渲染?您可能需要将路由器位置更改为 HistoryLocation 而不是 HashLocation(默认值).

Router.run 的 location 属性告诉它匹配路由的位置.如果您没有运行服务器端 React，我相信您必须使用 Router.HashLocation (或将其留空).

如果不是，则您以错误的方式访问组件.尝试使用 http://localhost:3000/#/inbox.熟悉 React-Router 可能需要一点时间，但绝对值得！

React 路由器文档 - HashLocation

I am willing to use React-router for my application, and I am trying the example given in the doc first, which I copied below. Now when I go to localhost:3000/, I see "App" as expected, but every other page, such as localhost:3000/inbox returns "Cannot GET /inbox". What am I missing here ?

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>
);

解决方案

I believe the issue is that you are making a http resource request:

GET /inbox HTTP/1.1
Host: localhost:3000

but are using client-side only routing. Are you intending on doing server side rendering too? You might need to change your router location to be HistoryLocation instead of HashLocation (the default).

The location prop of Router.run tells it where to match the routes against. If you're not running server side React, I believe you have to use Router.HashLocation (or just leave it blank).

If not, you are accessing your component the wrong way. Try using http://localhost:3000/#/inbox. It can take a little to familiarize yourself with React-Router but it is definitely worth it!

React Router Documentation - HashLocation

这篇关于反应路由器“无法获取/*"；除了根网址的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

07-30 22:53