Question

我正在开发 Spotify 克隆，其中，我正在开发侧导航。我想使用链接连接在 sidenav 中使用 react 划分的页面。

这是侧边栏代码

        <SideBackground>
            <LogoImg src="https://music-b26f.kxcdn.com/wp-content/uploads/2017/06/635963274692858859903160895_spotify-logo-horizontal-black.jpg"></LogoImg>

            <BrowserRouter>
                <Link to="/">
                    <Option Icon={HomeIcon} title="Home" />
                </Link>
                <Link to="/Search">
                    <Option Icon={SearchIcon} title="Search"/>
                </Link>
                <Link to="/Library">
                    <Option Icon={LibraryMusicIcon} title="Library"/>
                </Link>
            </BrowserRouter>

            <StringTitle>PLAYLIST</StringTitle>
            <Line/>
                {
                    playList.map(({ name }) => <PrintList>{name}</PrintList>)
                }
            <Option/>
        </SideBackground>

这是页面查看代码

<div>
     HOME
</div>

<div>
     LIBRARY
</div>

<div>
     Search
</div>

Answer 1

如果 Option 是组件，

<Router>
    <Switch>
      <Route exact path="/">
          <Option Icon={HomeIcon} title="Home" />
      </Route>
  ...
    </Switch>
<Router>

如果不起作用..然后检查导入和依赖项。

Answer 2

为什么要使用没有选择的选项？

首先，您需要在 app.js、route.js 或任何文件中为您的页面创建路由器。

import { Switch, Route, BrowserRouter } from "react-router-dom";

<BrowserRouter>
  <Switch>
    <Route path="/home" exact component={Home} />
    <Route path="/search" exact component={Search} />
    <Route path="/library" exact component={Library} />
  </Switch>
</BrowserRouter>

然后您可以在侧边栏文件中使用链接。

  <SideBackground>
    <LogoImg src="https://music-b26f.kxcdn.com/wp-content/uploads/2017/06/635963274692858859903160895_spotify-logo-horizontal-black.jpg"></LogoImg>

    <Link to="/">
      <span Icon={HomeIcon} title="Home">Home</span>
    </Link>
    <Link to="/Search">
      <span Icon={SearchIcon} title="Search">Search</span>
    </Link>
    <Link to="/Library">
      <span Icon={LibraryMusicIcon} title="Library">Library</span>
    </Link>

    <StringTitle>PLAYLIST</StringTitle>
    <Line />
    {playList.map(({ name }) => (
      <PrintList>{name}</PrintList>
    ))}
    <span />
  </SideBackground>

在侧边栏文件中不需要 BrowserRouter。对于添加图标，您可以使用 span 或 i 标记选项不适用于链接。

如何在反应路由器中使用链接

2 个答案: