Question

我试图将反应路由器4与Express服务器一起使用。

如果我将路径设置为＆＃34; /＆＃34;，它可以正常工作。但是，如果我设置路径＆＃34; / test＆＃34;，并访问测试，我得到＆＃34;无法获取/测试＆＃34;。是因为React Router 4与Express不兼容吗？

APP-client.js：

import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Board from './components/Board';

ReactDOM.render(
    <BrowserRouter>
        <div>
            <Route path="/test" component={Board} />
        </div>
    </BrowserRouter>
    , document.getElementById('react-container'));

Board.js：

var React = require('react');
var createReactClass = require('create-react-class');

var Board = createReactClass({
    render(){
        return (<h1>Board</h1>)
    }    
});

export default Board;

Answer 1

为了确保在定义所有快递路线之后React处理所有路线，我们将确保任何未在快递应用中处理的路线将被重定向到反应应用中的index.html以便像这样：

// All expressjs routes
// then
app.get('*', (req, res) => {                       
  res.sendFile(path.resolve(__dirname, 'the path to your react project', 'index.html'));                               
});

Answer 2

我遇到了与OP相同的问题，并按照Amr Aly的指示进行操作，并检查了一些博客文章和github问题，例如：https://tylermcginnis.com/react-router-cannot-get-url-refresh/

但是，按照他们的指示进行操作后，会抛出此错误：

“未捕获的SyntaxError：意外令牌<”

然后您继续进行大雁追捕，如this SO post所示。

要解决OP的问题并且不处理未捕获的语法错误，请尝试以下操作：

if (process.env.NODE_ENV === 'production') {
  const publicPath = path.join(__dirname, '../public');
  app.use(express.static(publicPath));
  app.use('*', express.static(publicPath));
}

反应路由器4并表达：不能GET

2 个答案: