React应用中Browser Router导致导航栏左右留白的解决方法

问题根源 #

你的代码里把<BrowserRouter>嵌套在了带有container类的<div>内部，而Bootstrap的container类默认自带左右内边距，这直接导致了导航栏两侧出现留白。

修复方案 #

将<BrowserRouter>移到container类的div外面，让导航栏脱离container的内边距约束：

<BrowserRouter>
  <div className="container my-3">
    <Navbar title="TextUtils" mode={mode} toggleMode={toggleMode}/>
    <Alert alert={alert}/>
    <Routes>
      <Route path="/" element={<TextForm showAlert={showAlert} heading="Try TextUtils - Word Counter, Character Counter, Remove Extra Spaces " mode={mode}/>} />
      <Route path="/about" element={<About mode={mode} />} />
    </Routes>
  </div>
</BrowserRouter>

优化建议 #

如果希望导航栏占满全屏宽度，建议把<Navbar>和<Alert>也移出containerdiv，单独放在<BrowserRouter>下，仅让页面内容部分使用container进行居中约束：

<BrowserRouter>
  <Navbar title="TextUtils" mode={mode} toggleMode={toggleMode}/>
  <Alert alert={alert}/>
  <div className="container my-3">
    <Routes>
      <Route path="/" element={<TextForm showAlert={showAlert} heading="Try TextUtils - Word Counter, Character Counter, Remove Extra Spaces " mode={mode}/>} />
      <Route path="/about" element={<About mode={mode} />} />
    </Routes>
  </div>
</BrowserRouter>

内容的提问来源于stack exchange，提问作者PGTech