Question

这是我的redux路线：

const routes =  (
    <Router history={browserHistory}>
        <Route path="/" component={App}>
        <IndexRoute component={Login} />
        <Route name="first" path="/first" component={First} />
        <Route name="second" path="/second" component={Second} />
        </Route>
  </Router>
)

export default routes

我的App组件有Header，即：

class Header extends Component {
  render() {
    return (
      <div>
        <h3><Link to="first">First</Link></h3>
        <h3><Link to="second">Second</Link></h3>
      </div>
    )
  }
}

export default Header

这一切都很好..我的Header呈现得很好，当我点击它们时，它们会被路由到相应的网址。

我面临的问题是我只能通过点击进行路由..当我从浏览器访问/first网址时，我收到404。

当我访问/时，它会将我重定向到带有标题的登录页面，然后单击我可以路由的标题，但是当我从浏览器直接调用/first时，它会给我404错误。

为什么这个？

如果有人回答这个问题会很高兴

Answer 1

您需要将服务器配置为在应用它的任何路径上返回您的应用程序。为此，您可以使用catch all pattern *。

所以从你的服务器内部（假设一个Node.js服务器）

app.get('*', function (req, res) {
    res.sendFile(path.join(__dirname + '/index.html'));
});

然后在客户端启动路由器。

反应路由器无法从浏览器访问子URL

1 个答案: