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

【问题标题】：How To Link To Another Page in React?如何在 React 中链接到另一个页面？
【发布时间】：2020-09-20 13:53:50
【问题描述】：

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

我的尝试：

在我的 App.js 文件中，我已经设置了 React-Router-Dom，如您所见。
我还在导航栏中插入了链接
现在，我在本地服务器上查看站点时遇到了问题。（见截图）

这是 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

【问题讨论】：

请查看屏幕截图了解更多内容！这会有所帮助:)
请在此处查看 React-router 的文档：它应该作为“链接”而不是“链接”导入：reactrouter.com/web/api/Link

标签： reactjs react-router navigation linker

【解决方案1】：

你用错了链接


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

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

使用它，看看它是否有效

【讨论】：

【解决方案2】：

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

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

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

顺便说一句：链接应该在li

里面

【讨论】：

【解决方案3】：

在 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 就像你提到的那样

导出默认导航栏

【讨论】：

【解决方案4】：

在 App.js 中，使用

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

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。