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

Question

我想做什么：我想让我的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

这里是一个错误的屏幕截图： 查看图片描述

- LK10

---

请查看屏幕截图以获取更多上下文信息！这将有所帮助 :) - LK10

请在此处查看React-router的文档： 应该将其导入为“Link”，而不是“link”： https://reactrouter.com/web/api/Link - Tasos

Answer 1

你使用链接的方式不正确

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

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

使用这个并查看是否有效

- Mohammad Faisal

Answer 2

组件在导入和JSX中必须以大写字母L开头。

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

请在https://reactrouter.com/web/api/Link阅读更多内容，其中也有一些示例。

顺便提一下：Link应该放在li标签中。

- radulle

Answer 3

在 App.js 中使用。

<main>
        <Switch>
          <Route exact path="/" component={HomeScreen}/>
          <Route exact path="/product/:id" component={ProductScreen}/>
          <Route exact path="/cart" component={CartScreen}/>
          
        </Switch>
      </main>

- Ahmad Khalid

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community

Answer 4

在 app.js 文件中：按照下面的示例添加 Switch Router，并添加精确的路由词。

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

导出默认应用程序

在导航栏文件中：进行相应更改。

return (

    <nav>
        <h1 className="h1">Hello</h1>
        <ul>
              <li><link to="/dashboard">Dashboard<link></li>
        </ul>
    </nav>
) 

注意：它不是 /Dashboard，而是 /dashboard，就像您在路由中提到的那样。

默认导出 NavBar。

- Naresh