如何在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

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

希望這有幫助！

Answer 4

試着說下面：

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