Question

很抱歉，如果这是一个重复的问题。我似乎无法解决这个问题或找到答案。我有一个基本的React Router设置，适用于IndexRoute（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，也可以使用express-history-api-fallback：

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

ReactJS路由器无法正常工作

1 个答案: