Question

我有一个使用Typescript的React应用。

反应版本"react": "^16.9.0"和React-Router版本"react-router-dom": "^5.1.2"

我的App.tsx文件设置如下：

const App: React.FC = observer(() => {

  return (
    <div className="App">
      <Router>
        <Route path="/1234">
          <Home />
        </Route>
      </Router>
    </div>
  );
});

export default App;

但是当我尝试转到localhost:4000/1234时，出现以下错误：

Refused to load the image 'http://localhost:4000/favicon.ico' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

我应该在哪里看到<Home />组件。

非常感谢您的帮助。

Answer 1

我认为这不是React-Router的问题。这是因为内容安全策略。

有关更多信息，请选中此项-https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy。

您可以尝试将以下元标记添加到public / index.html文件中。

<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *; img-src 'self' data: *">

Answer 2

问题在于我也正在使用Express，因此使用了Ton Carrier的答案以及我的index.ts文件中的以下内容：

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

这里的关键是'*'，否则会中断。

无法在React Typescript中使用React-Router

2 个答案: