如何在Reactjs中使用Navbar链接？

Question

我正在尝试使用Reactjs创建一个网站。我尝试创建Navbar并在导航栏上创建了2个Home和Contact链接。当我点击例如联系人按钮时，我可以在URL上看到终点但在页面上没有任何反应。我已经创建了路由和链接，但我真的不明白为什么我不能使用Navbar的链接。拜托，拜托，请帮帮我？先感谢您。

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;

这是我的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;

这是我的路线组件。另外，我在App.js中调用了route和navbar组件。

Answer 1

您应该在应用程序中仅使用一个Router实例。从Navbar组件中删除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;

Answer 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;

Answer 3

试着说下面：

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

Answer 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;

希望这有帮助！