ReactJS - Unbekannt prop `activeClassName` auf <a> tag. Entfernen Sie diese Requisiten aus dem element

Ich bin mit reagieren 15.4.2 und reagieren-router4.0.0, und Dieses Projekt wurde Bootstrap mit Erstellen Sie Reagieren App.

Hier ist mein Code.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import {BrowserRouter as Router,Route,Link} from 'react-router-dom'


 const AboutPage = () => {
 return(
    <section>
        <h2>This is About page</h2>
        <Link activeClassName="active" to="/about/nestedone">Nestedone</Link>
        {' '}
        <Link activeClassName="active" to="/about/nestedtwo">Nested two</Link>
    </section>
)
}

const HomePage = () => {
return(
    <section>
        <h2>This is Home page</h2>
        <Link to="/about">About</Link>
    </section>
)
}

const NestedOne = () => {
return (
    <section>
        <h2>Nested page 1</h2>
    </section>
)
}


const NestedTwo = () => {
return (
    <section>
        <h2>Nested page 2</h2>
    </section>
)
}


 ReactDOM.render(
 <Router> 
  <section>
    <Route exact path="/" component={HomePage} />
    <Route path="/about" component={AboutPage} />
    <Route path="/about/nestedone" component={NestedOne} />
    <Route path="/about/nestedtwo" component={NestedTwo} />
 </section>
 </Router>,
  document.getElementById('root')
);

Wenn ich durchsuchen /about bin ich immer diese Fehlermeldung:

"Warnung: Unbekannte prop activeClassName am tag. Entfernen Sie diese Requisiten aus dem element.

Was mache ich hier falsch?

Dank!

  • Sie möchten möglicherweise verwenden Sie die activeclassName - Eigenschaft statt
  • Ich sehe nicht, activeClassName an alle hier, github.com/ReactTraining/react-router/blob/master/packages/... Vielleicht sollten Sie verwenden 'reagieren-router" statt
  • In der about Seite, ich versuche nur, um eine aktive Verbindung, die je auf meine URL wenn ich in /über/nestedone oder /über/nestedtwo.
InformationsquelleAutor habibun | 2017-03-31
  1. 16

    Den activeClassName Eigenschaft ist keine Eigenschaft der Link aber NavLink.

    So, einfach ändern Sie Ihren code so verwenden NavLink statt Link:

    const AboutPage = () => {
 return(
    <section>
        <h2>This is About page</h2>
        <NavLink activeClassName="active" to="/about/nestedone">Nestedone</NavLink>
        {' '}
        <NavLink activeClassName="active" to="/about/nestedtwo">Nested two</NavLink>
    </section>
)

    Erinnern zu importieren, die NavLink von der react-router-dom:

    import {  NavLink } from 'react-router-dom'
    • Diese Feste mein Problem. Komisch, NavLink ist auch nicht aufgeführt in den docs: knowbody.github.io/react-router-docs/api/Link.html#
    • Ich bin immer dieser Fehler auch mit NavLink... nicht sicher, warum es ist seiend geworfen.
    • können Sie teilen sich eine Geige?
    InformationsquelleAutor coderade
  2. 6

    activeClassName ist nicht eine Eigenschaft von Link aber NavLink.

    Da reagieren-router v4 beta8, die Eigenschaft ist active standardmäßig. Überprüfen Sie, welche version installiert ist, die in Ihren Knoten Ordner Module

    • danke, active noch nicht arbeiten, sowieso, ich downgrade es auf 3. alles funktioniert gut, außer IndexRoute
    • sind Sie Import {NavLink} from 'react-router-dom'?
    InformationsquelleAutor Damien Leroux
  3. 2

    Mein Problem war, dass ich mit reactstrap und importieren Ihre NavLink element, das NICHT das Attribut activeClassName. Stellen Sie sicher, dass Sie importieren NavLink vom reagieren-router-Bibliothek wie diese:

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

    InformationsquelleAutor Justin
Schreibe einen Kommentar