reactjs - 如何在 React 中链接到另一个页面？

Question

我正在尝试做的事情:我正在尝试让我的 React Web-App NavBar 链接到我的应用程序中的其他页面。

我尝试过的:

1. 在我的 App.js 文件中，我设置了 React-Router-Dom，如您所见。
2. 我还在导航栏中插入了链接
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

这是导航栏的代码

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

这是错误的屏幕截图: enter image description here

Answer 1

你使用链接的方式不对

import {Link} from "react-router-dom";

<Link to="/Dashboard"> Dashboard </Link>

使用它，看看它是否有效