如何在 react-router 中使用链接答案

【问题标题】：How to use link in react-router如何在 react-router 中使用链接
【发布时间】：2021-07-28 09:02:05
【问题描述】：

我正在开发 spotify clone，其中，我正在开发侧导航。我想使用链接连接使用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>

【问题讨论】：

你需要在BrowserRouter里面设置Route，根据路径渲染合适的组件。

标签： reactjs react-router spotify styled-components

【解决方案1】：

为什么你使用选项而不选择？

首先，您需要在 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】：

如果 Option 是组件，

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

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

【讨论】：