Question

我正在尝试使用Reactjs创建一个网站。我尝试创建导航栏，并在导航栏上创建了2个链接，分别是“主页”和“联系人”。例如，当我单击“联系人”按钮时，我可以在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实例。从导航栏组件中删除 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

在导航栏组件中，只需删除<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>

如何在Reactjs中使用Navbar链接？

4 个答案: