时间戳

首页 > 解决方案 > 使用标签时导航栏不显示

javascript - 使用标签时导航栏不显示

问题描述

我将锚标记更改为链接标记，整个组件不显示。值得注意的是，我使用了锚标记并​​且它被正确渲染。但是，更改为 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;

标签： javascripthtmlcssreactjsreact-router

解决方案

有一些问题，Link而是react-router 尝试使用

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;

推荐阅读