Javascript 在其他选项卡中打开“反应相对路径”组件将断开页面

我有以下静态网站建立在反应运行从netlify现在 我对此有两个部分。主主页组件和关于组件。如果你访问这个网站，一切似乎都正常。如果我们点击“About”进入About组件，您可以看到About组件。但是，如果我们对它进行硬刷新，组件就会损坏。不仅如此，当我试图在新窗口或选项卡中打开About组件时，它也会在该点中断。 在从netlify运行网站之前，我检查了我测试网站的本地环境。About组件在那里工作得很好。它将在新选项卡或窗口中打开。如果我做了一个硬刷新，我仍然可以看到关于页面。 我不知道我做错了什么。这是我的第一个项目。由于某些原因，它可以在本地设备中正确渲染组件，但无法从netlify服务器渲染。我不知道怎么修。可能是因为我把它们送错了。我的index.js文件如下所示

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom'
import App from './component/js/App';
import About from './component/js/About'
import './index.css'

ReactDOM.render((
    <Router>
        <Route path='/' component={App} exact strict />
        <Route path='/about' component={About} exact strict />
    </Router>
), document.getElementById('root'))

从“React”导入React；
从“react dom”导入react dom；
从“react Router dom”导入{BrowserRouter as Router，Route}
从“./component/js/App”导入应用程序；
从“/component/js/About”导入关于
导入“./index.css”
ReactDOM.render((
)，document.getElementById（'root'））

我不知道我做错了什么。如果有人有任何想法或建议，请让我知道

更新

正如下面提到的答案一样，我必须切换到hashrouter以使其暂时工作。此解决方案的唯一问题是url看起来不干净，因为url中有一个“#”。我正在尝试使用浏览器历史记录来帮助解决这个问题，因为我在某个地方读到了我需要做的事情。同时，如果有人对如何使它看起来更干净提出建议，那将非常有帮助

更新代码

 import React from 'react';
    import ReactDOM from 'react-dom';
    import { HashRouter as Router, Route } from 'react-router-dom'
    import App from './component/js/App';
    import About from './component/js/About'
    import './index.css'

    ReactDOM.render((
        <Router>
            <Route path='/' component={App} exact strict />
            <Route path='/about' component={About} exact strict />
        </Router>
    ), document.getElementById('root'))

从“React”导入React；
从“react dom”导入react dom；
从“react Router dom”导入{HashRouter as Router，Route}
从“./component/js/App”导入应用程序；
从“/component/js/About”导入关于
导入“./index.css”
ReactDOM.render((
)，document.getElementById（'root'））

它不起作用的原因是，当您单击链接时，客户端js会更改url，而react本身会更改dom，而刷新或直接将url放入选项卡时，不会发生这种情况

使用一个

从'react router dom'导入{HashRouter}；
…

---

请注意，

HashRouter

来自

react router dom

，而不是核心

react router

包。

谢谢您的建议。它可以工作，但我想知道是否有一种方法可以让它与更好的url一起工作。我的意思是，不使用www.urlname/#/page，我如何才能使其成为www.urlname/page并使其工作？我看到很多人用express做事情，但我认为这对于我想要完成的事情来说太多了

import { HashRouter } from 'react-router-dom';

<HashRouter>
  …
</HashRouter>