ReactJS 路由器不工作

Question

抱歉，如果这是一个重复的问题。我似乎无法解决这个问题或找到答案。我有一个适用于 IndexRoute 的基本 React Router 设置（localhost:8080/ 或 localhost:8080 渲染）。模板按照我想要的方式嵌套，但子路由 '/test1、/test2 和 /test3 不呈现。我得到 Cannot GET /test1 这是我的代码：

import React from "react";
import ReactDOM from "react-dom";
import { Router, Route, IndexRoute, browserHistory } from "react-router";

import Index from "./pages/Index";
import Layout from "./pages/Layout";
import Test1 from "./pages/Test1";
import Test2 from "./pages/Test2";
import Test3 from "./pages/Test3";

const app = document.getElementById('main');

ReactDOM.render(
  <Router history={ browserHistory }>
    <Route path="/" component={Layout}>
      <IndexRoute component={Index}></IndexRoute>
      <Route path="test1" component={Test1}></Route>
      <Route path="test2" component={Test2}></Route>
      <Route path="test3" component={Test3}></Route>
    </Route>
  </Router>,
app);

我试过重命名没有数字的路径和组件，也试过 path='/test1'

我猜这是一个小错误。我做错了什么？

Answer 1

看起来您的服务器配置遗漏了这一部分：

// All routes should resolve with `index.html`
app.get('*', function (request, response){
    response.sendFile(path.resolve(__dirname, 'public', 'index.html'))
})

将 public 更改为您拥有主要 index.html 的地方。

您也可以使用 express-history-api-fallback，如果您使用 express:

app.use(staticFallback('index.html', { root: buildDir }));

ReactJS 路由器不工作

ReactJS router not working

javascript

reactjs

react-router

react-jsx