如何使用 react-router 创建侧边栏并设置按钮样式

Question

我想创建一个带有按钮的侧边栏，如图所示。我想让按钮在活动时呈深灰色。我有引导程序代码，但是如果我使用 public/index.html 中的 css 文件和 javascript 文件应用引导程序，那么导航栏图像就会出现在导航栏的中间，所以我想将 react-bootstrap 用于我的侧边栏。

https://i.stack.imgur.com/DjNGy.jpg

这是引导程序代码。我如何使用反应路由器的链接而不是标签？对于反应引导程序，我们通常使用 <'Row'> <'Col'> 那么我们如何使用这么多“col”类“col-sm-2 col-md-2 col-lg-2 col-xl-2”。我也对 react-bootstrap 中的 ul 标签感到困惑，关于如何将它们与导航药丸和其他类一起使用

<nav class="d-none d-md-block col-sm-2 col-md-2 col-lg-2 col-xl-2 sidebar">    

        <div class="sidebar-sticky">

                <ul class="nav nav-pills  nav-fill flex-column" role="tablist" style="margin-top:42px;">

                        <li class="nav-item">

                          <a class="nav-link active" data-toggle="pill" href="#/!" style="text-align:left;">

                            <img src="/images/windows.png" style="height:20px;">

                            Dashboard</a>

                        </li>

                        <li class="nav-item">

                          <a class="nav-link" data-toggle="pill" href="#!people" style="text-align:left;">

                                <img src="/images/people.png" style="height:20px;">                                

                            People</a>

                        </li>

                </ul>

        </div>

      </nav>

侧边栏的css

.sidebar {

    position: fixed;

    top: 0;

    bottom: 0;

    left: 0;

    z-index: 100;

    padding: 48px 0 0;

}

Answer 1

您可以使用它用“Link”反应路由器标签替换“a”标签。例如<Link to="/target" />或者<Link to="/target">&nbsp; <!-- your tags come here -->&nbsp;</Link>但是你应该避免在 index.html 中使用 css 和 js 文件。正确的方法是创建一个新组件并在其自己的范围内设置样式。当您使用 react-bootstrap 时，您可以像这样创建组件（对于您的情况，我认为没有必要使用许多 css 类。默认情况下，您可以通过 react-bootstrap 列实现您的目标）：<Container> // Your sidebar&nbsp; <Row>&nbsp; &nbsp; <Col><Link to="/path-1" /></Col>&nbsp; </Row>&nbsp; <Row>&nbsp; &nbsp; <Col><Link to="/path-2" /></Col>&nbsp; </Row>&nbsp; <Row>&nbsp; &nbsp; <Col><Link to="/path-2" /></Col>&nbsp; </Row></Container>您需要应用一些 css 样式来实现最终布局。

Answer 2

您需要使用 react-router 中的 Link 组件。替换<a></a>链接组件的标记<Link/>。所以你在哪里使用：<a class="nav-link active" data-toggle="pill" href="#/!" style="text-align:left;">它应该是：<Link to={"/route_that_you_want_to_go"} style={{textAlign: "left"}}> Name </Link>此外 jsx 不使用class关键字来引用它使用的 css 样式className