使用导航栏时不显示<link>标签

Question

我将锚标记更改为链接标记，整个组件不显示。 值得注意的是，我使用了锚标记并且它被正确渲染。 但是，更改为 Link 标记后，将不再显示任何内容。 下面是我的代码的样子：

导航栏组件

import React, {Component} from 'react';
import { Link } from 'react-router';


class Navbar extends Component {
    render() {
        return (
        <div className="Navbar">
            <ul className="navbar-list">
                <li className="active"><Link to={"/home"}>Home</Link></li>
                <li><Link to={"/about"}>About Us</Link></li>
                <li><Link to={"/pricing"}>Pricing</Link></li>
            </ul>
        </div>
    )
    }
}


export default Navbar

css

.navbar-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  overflow: hidden;
  background-color: #333;

}

.navbar-list li{
float: left;
}

.navbar-list li Link {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.navbar-list li Link:hover{
  background-color: #111 ;
}

.active {
  background-color: #4CAF50;
}

应用程序.js 文件

class App extends Component {
  render() {
    return (
      <div className="App">
        <Navbar />
      </div>
    );
  }
}

export default App;

Answer 1

react-router的Link存在一些问题，而是尝试使用

import { NavLink } from 'react-router-dom';

您的代码将如下所示：

在您的 package.json 的依赖项中并执行npm i ：包括：

    "react-router-dom": "5.0.0",

import { BrowserRouter as Router } from "react-router-dom";

class App extends Component {
  render() {
    return (
      <div className="App">
<Router>
        <Navbar />
<Router>
      </div>
    );
  }
}

export default App;

import React, { Component } from 'react';

import { NavLink } from 'react-router-dom';


class Navbar extends Component {

    render() {
        return (

            <div className="Navbar">
                <ul className="navbar-list">
                    <li className="active"><NavLink to={"/home"}>Home</NavLink></li>
                    <li><NavLink to={"/about"}>About Us</NavLink></li>
                    <li><NavLink to={"/pricing"}>Pricing</NavLink></li>
                </ul>
            </div>

        )
    }
}


export default Navbar;

Answer 2

也许您可以尝试像这样更改 To prop on string：

<Link to="/pricing">Pricing</Link>

您可以尝试的另一件事是安装 react-router-dom 而不是 react-router。