反应路由器无法从浏览器访问 child url

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 渲染得很好，当我点击它们时，它们被路由到它们各自的 url..

我面临的问题是我只能点击路由。当我从浏览器访问 /first url 时，我得到 404.

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

这是为什么？？

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

Answer 1

您需要将您的服务器配置为 return 您的应用程序在命中它的任何路径上。为此，您可以使用捕获所有模式 *.

因此从您的服务器内部（假设 Node.js 服务器）

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

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

反应路由器无法从浏览器访问 child url

react router cannot access child url from browser

reactjs

react-router