您必须指定 'to' 属性

Question

我正在尝试使用Link 而不是锚标记。在这个 Link 标记中，我使用的是 to 属性，但它给了我错误，例如“您必须指定 'to' 属性”。

Nav.jsx 代码

import React from "react";
import { Link, NavLink } from "react-router-dom";
const Navbar = () => {
return (
<nav className="nav-wrapper grey darken-3">
  <div className="container">
    <Link className="brand-logo">Sherlock Holmes</Link>
    <ul className="right">
      <li>
        <Link to="/home">Home</Link>
      </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/contact">Contact</Link>
        </li>
      </ul>
    </div>
  </nav>
 );
};

export default Navbar;

App.jsx 代码

import React, { Component } from "react";
import NavBar from "./components/Nav";
import { BrowserRouter, Route } from "react-router-dom";
import Home from "./components/Home";
import About from "./components/About";
import Contact from "./components/Contact";

class App2 extends Component {
  state = {};
  render() {
    return (
      <BrowserRouter>
        <div className="App">
          <NavBar />
          <Route path="/home" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </div>
      </BrowserRouter>
    );
  }
}

export default App2;

它在 ReactDom.render 的 App.jsx 页面上给我一个错误，你必须指定 'to' 属性。

Answer 1

问题

<Link className="brand-logo">Sherlock Holmes</Link>

没有to 属性

解决方案

<Link to="/some_link" className="brand-logo">Sherlock Holmes</Link>