Не могу использовать React-Router в React Typescript

Question

У меня есть приложение React, которое использует 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

Проблема заключалась в том, что я также использовал Express, поэтому использовал ответ Тон Кэрриер, а также приведенный ниже в моем файле index.ts:

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

Ключ здесь в том, что '*',в противном случае он ломается.

Answer 2

Я думаю, что это не проблема React-Router. Это из-за Content-Security-Policy.

Для получения дополнительной информации, пожалуйста, отметьте это - 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: *">