[解決済み] Reactで他のページにリンクする方法は？

質問

私がやろうとしていること React Web-AppのNavBarを、アプリ内の他のページにリンクさせようとしているのです。

試してみたこと

1. App.jsファイルの中で、ご覧のようにReact-Router-Domの設定をしています。
2. また、NavBarの中にリンクを挿入しています。
3. 現在、ローカルサーバーでサイトを見る際に問題に直面しています。(スクリーンショット参照)

以下は、App.jsのコードです。

import React from "react"
import NavBar from "./NavBar"
import Dashboard from "./Dashboard"
import {BrowserRouter as Router, Switch, Route} from "react-router-dom";

function App() {
    return (
        <Router>
        <div>
            <NavBar />
            <Route path="/dashboard" component={Dashboard} />
        </div>
        </Router>
        )
}

export default App

以下は、NavBarのコードです。

import React from "react"
import "./Style.css"
import { link } from 'react-router-dom'

class NavBar extends React.Component {
    render() { return (

        <nav>
            <h1 className="h1">Hello</h1>
            <ul>
                <link to={"./Dashboard"}>
                    <li>Dashboard</li>
                </link>
            </ul>
        </nav>
    ) 
    }
}

export default NavBar

以下は、エラーのスクリーンショットです。 画像の説明をここに入力

解決方法

リンクコンポーネントは、インポートおよびJSXの両方で、大文字のLで始まる必要があります。

  import { Link } from 'react-router-dom'
  
  <Link to={"./Dashboard"}>
    Dashboard
  </Link>

詳しくはこちら https://reactrouter.com/web/api/Link また、いくつかの例もあります。

ところで。 リンク の中にあるはずです。 li