为什么使用React Router进行路由后，图标不再加载？

Question

我有一个带有显示产品网格的页面。转到产品详细信息页面后，顶部栏中的图标不再加载。为什么会这样呢？

这是我的布局组件：

public boolean thereIsInList(Member member, List<Member> mList) {
    if (mList == null) return false;
    for (Member m : mList) {
        if (m.getId() == member.getId()) return true;
    }
    return false;
}

我的路由器：

export default class Layout extends React.Component {
    render(){
        return <div>
            <LoadingScreen/>
            <AppBar/>
            <MyRouter/>
            <Footer/>
            </div>
    }
}

这是我的AppBar的样子：

const MyRouter = () => {
  return(
    <div
      style={style}
    >
      <BrowserRouter>
        <Route
          path="/"
          exact
          component={ProductList}
        />
        <Route
          path="/products/:id"
          exact
          component={ProductPage}
        />
      </BrowserRouter>
    </div>
  )
}

export default MyRouter 

如您所见，应用程序栏甚至不在路由器内部，为什么图标会消失？

这是我进入产品详细信息页面后的样子：

Answer 1

src属性是相对路径-浏览器URL在更改，浏览器在其中查找这些图片的根目录也在更改。您必须将它们设置为绝对URL，如果它们是静态资产，则将它们捆绑在一起。