How To Link To Another Page in React?

Question

What I'm trying to do: I'm trying to get my React Web-App NavBar to link to other pages inside my app.

What I've tried:

1. Inside my App.js file, I've set up React-Router-Dom as you can see.
2. I've also inserted the links inside my NavBar
3. Now, I face a problem when looking at the site on my local server. (See screenshot)

Here's the code for 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

Here's the code for the 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

Here is a screenshot of the error: enter image description here

Answer 1

Link component must start with capital letter L in both import and JSX.

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

Read more at https://reactrouter.com/web/api/Link, there are a few examples too.

BTW: Link should be inside li