如何在 Reactjs 中使用导航栏链接？答案

【问题标题】：How can I use Navbar link in Reactjs?如何在 Reactjs 中使用导航栏链接？
【发布时间】：2018-09-10 15:37:09
【问题描述】：

我正在尝试使用 Reactjs 创建一个网站。我尝试创建导航栏，在导航栏上，我创建了 2 个链接，分别是主页和联系人。当我单击例如联系按钮时，我可以在 URL 上看到端点，但在页面上，什么也没有发生。我已经创建了路线和链接，但我真的不明白为什么我不能使用导航栏的链接。请你帮帮我好吗？提前谢谢你。

import React from 'react';
import PropTypes from 'prop-types';
import {BrowserRouter, Link} from "react-router-dom";

const Navbar = () => {
     return (
        <BrowserRouter>
            <nav>
                <ul>
                    <li><Link to='/'>Sağlık Hizmetim</Link></li>
                    <li><Link to='/contact'>İletişim</Link></li>
                </ul>
            </nav>
        </BrowserRouter>
        );
 };

 Navbar.propTypes = {};

 export default Navbar;

这是我的导航栏组件。

import React from 'react';
import {Route,BrowserRouter,Switch} from 'react-router-dom';
import Contact from "./Contact";
import Home from './Home';

const Routes = () => {
     return (
    <BrowserRouter>
        <Switch>
            <Route exact path='/' component={Home}/>
            <Route path='/contact' component={Contact}/>
        </Switch>
    </BrowserRouter>
);
 };

 export default Routes;

这是我的 Route 组件。另外，我在 App.js 中调用了路由和导航栏组件。

【问题讨论】：

试试<Route exact path='/contact' component={Contact}/>
感谢您的回答，但它不起作用:(
你试过
吗？反过来呢？

【解决方案1】：

您应该在应用程序中仅使用一个路由器实例。从导航栏组件中删除 BrowserRouter 并尝试：

import React from 'react';
import PropTypes from 'prop-types';
import {BrowserRouter, Link} from "react-router-dom";

const Navbar = () => {
 return (
        <nav>
            <ul>
                <li><Link to='/'>Sağlık Hizmetim</Link></li>
                <li><Link to='/contact'>İletişim</Link></li>
            </ul>
        </nav>
    );
};

Navbar.propTypes = {};

export default Navbar;

【讨论】：

嘿，当删除 BrowserRouter 时，我收到另一个错误，上面写着“您不应该在之外使用 ”

【解决方案2】：

您的应用程序中应该只有一个<BrowserRouter /> 实例。从<Navbar /> 中删除一个，并将所有链接替换为<NavLink />，如下所示；

import React from "react";
import PropTypes from "prop-types";
import { NavLink } from "react-router-dom";

const Navbar = () => {
  return (
    <nav>
      <ul>
        <li>
          <NavLink to="/">Sağlık Hizmetim</NavLink>
        </li>
        <li>
          <NavLink to="/contact">İletişim</NavLink>
        </li>
      </ul>
    </nav>
  );
};

Navbar.propTypes = {};

export default Navbar;

【讨论】：

感谢您的回复。但是，当我将链接更改为导航链接并删除 BrowserRouter 时，我收到另一个错误，上面写着“您不应该在之外使用或 withRouter()”

【解决方案3】：

试着写在下面：

<a routerLink="/contact" routerLinkActive="active">{{Your data}}</a>

【讨论】：

【解决方案4】：

在Navbar组件中，去掉<BrowserRouter>

导航栏组件：

import React from 'react';
import PropTypes from 'prop-types';
import {Link} from "react-router-dom";

const Navbar = () => {
  return (
    <nav>
      <ul>
        <li><Link to='/'>Sağlık Hizmetim</Link></li>
        <li><Link to='/contact'>İletişim</Link></li>
      </ul>
    </nav>
  );
};

Navbar.propTypes = {};

export default Navbar;

路由组件：

import React from 'react';
import {Route,BrowserRouter,Switch} from 'react-router-dom';
import Contact from "./Contact";
import Home from './Home';
import Navbar from './Navbar';

const Routes = () => {
  return (
    <BrowserRouter>
      <div>
        <Navbar />
        <Switch>
          <Route exact path='/' component={Home}/>
          <Route path='/contact' component={Contact}/>
        </Switch>
      </div>     
    </BrowserRouter>
  );
};

export default Routes;

希望对您有所帮助！

【讨论】：

你不应该在之外使用
也许我们的应用中应该只有一个<BrowserRouter>。您应该尝试在<BrowserRouter> of Routes 组件中调用Navbar 组件
我将导航栏组件中的链接更改为 href 标记，现在它可以工作了。 :))
我刚刚更新了我的答案，你可以再看看！