在語義 UI 菜單中實現鏈接

Question

我想在音樂（默認）、小說和電影頁面之間建立鏈接。 使用我已經在下面制作的語義 ui 菜單。 目前顯示菜單，但沒有鏈接 function。

url 發生了變化，但我鏈接到的函數沒有出現。 我只能看到音樂 function。

import React, { useState } from 'react';
import { BrowserRouter, Routes, Route, NavLink, withRouter } from "react-router-dom";
import { Icon, Menu } from 'semantic-ui-react'

import Music from './components/music.js'
import Novel from './components/novel.js'
import Cinema from './components/cinema.js'

function App() {
  return (
    <BrowserRouter>
    <Navigation />
      <Routes>
        <Route path="/" element={<Music />}>
          <Route path="novel" element={<Novel />} />
          <Route path="cinema" element={<Cinema />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

function Navigation() {
  const [activeItem, setActiveItem] = useState("music");
  const setActiveItemOnClick = (name) => {

      setActiveItem(name);
  };

  return (
      <Menu fluid widths={3} icon='labeled'>
          <Menu.Item
              as={NavLink} to="novel"
              name='novel'
              active={activeItem === 'novel'}
              onClick={() => setActiveItemOnClick("novel")}

          >
              <Icon color='blue' name='book' />
              Novels
          </Menu.Item>
          <Menu.Item
              as={NavLink} to="cinema"
              name='movie'
              active={activeItem === 'movie'}
              onClick={() => setActiveItemOnClick("movie")}

          >
              <Icon color='orange' name='video camera' />
              Movies
          </Menu.Item>
          <Menu.Item
              as={NavLink} to="/"
              name='music'
              active={activeItem === 'music'}
              onClick={() => setActiveItemOnClick("music")}

          >
              <Icon color='purple' name='music' />
              Music
          </Menu.Item>
      </Menu>
  )
}

export default App;

我按照教程給我這段代碼，導航欄出現並且看起來不錯但點擊目前沒有任何作用。 我是否錯誤地編寫了 NavLink？ 我在媒體上關注了這個教程： https://medium.com/@alicewon4/semantic-ui-navbar-with-react-router-83fd17d220da

Answer 1

我通過以下方式解決了它：

function App() {
  return (
    <BrowserRouter>
    <Navigation />
      <Routes>
        <Route exact path="/" element={<Music />}/>
          <Route path="novel" element={<Novel />} />
          <Route path="cinema" element={<Cinema />} />

      </Routes>
    </BrowserRouter>
  );
}

把代碼改成這樣。 菜單非常棒。