React Router nicht ändern URL

Question

Ich bin neu zu reagieren (1 Woche: P). Ich habe eine App, die eine API basierend auf einem Suchbegriff trifft. Aus diesen Ergebnissen kann ein Benutzer Lieblingsartikel aus den Ergebnissen ziehen. Wenn ich auf den Link für Favoriten klicke, werde ich auf die richtige Komponente verwiesen und die URL spiegelt diese Änderung wider. Wenn ich jedoch einen neuen Suchbegriff eingib, wird mir aus der Seitennavigationsleiste, die statisch immer dort ist, die Korrekturinformation in der richtigen Komponente angezeigt, aber die URL ändert sich nicht; es heißt immer noch http://localhost:3000/favorites wo es solltehttp://localhost:3000 sein. Hier ist der relevante Code, wenn es noch mehr gibt, von dem Sie glauben, dass es nötig ist, um eine Schätzung zu riskieren, lassen Sie es mich bitte wissen. Die Routen:

return(
     <BrowserRouter > 
     <div className='routes'> 
     <Route path='/' component={App}/> 
     <Route path='/favorites' component={Favorites}/> 
     </div> 
     </BrowserRouter> 
    ) } 

Die SearchBox Komponente:

return(
    <form className="search-box" > 
    <input type="text" placeholder="Search.." name="search" autoComplete='off'/> 
    <button className="fa fa-search" type="submit" onClick={this.handleSearch.bind(this)}> 
    </button> 
    </form> 
) 

Und die SideNav Komponente mit den Verbindungen:

return(
    <nav className='naviagtion'> 
    <ul className='mainmenu'> 
    <div className='img-logout'> 
     <img src={this.props.info.image} alt='Avatar' /> 
     <Logout handleLogout={this.handleLogout.bind(this)}/> 
    </div> 
    <SearchBox search={this.searchHandler.bind(this)}/> 
     <li> 
     <a href="/">home</a> 
     </li> 
     <li> 
     <a href="/favorites">favorites</a> 
     </li> 
     <li> 
     <a href="">playlists</a> 
      <ul className='submenu'> 
      <li> 
      <a href=""> 
       <strong>list of lists</strong> 
      </a> 
      </li> 
      </ul> 
     </li> 
     <li> 
     <a href="">friends</a> 
     </li> 
    </ul> 
    </nav> 
) 

ich eine Menge Informationen der URL gesehen habe ändern, aber Die Komponente wird nicht gerendert. Das ist nicht mein Problem. Dann wird die Komponente korrekt gerendert, aber die URL reflektiert das nicht.

EDIT:

Hier ist, wo die SideBar in der Heim-Komponente wiedergegeben wird.

 <div> 
     <SideBar 
      info={this.state.info} 
      logout={this.handleLogout.bind(this)} 
      search={this.handleSearch.bind(this)} 
     /> 
     <Main videos={this.state.videos}/> 
     </div> 

Und hier ist die App.js

<div className='App'> 
    {localStorage.userData === undefined 
     ? this.renderLogin() 
     : <Home logout={this.logout.bind(this)} deets= 
     {localStorage.userData}/>} 
    </div> 

Answer 1

Ein paar Dinge, die helfen könnten.

1) Die Route-Komponente wird in die Switch-Komponente eingefügt (importieren). Stellen Sie außerdem sicher, dass "exact path" für "/" verwendet wird oder dass der Benutzer es nicht zu "/ favorites" schafft.

return(
    <Switch> 
    <div className='routes'> 
    <Route exact path='/' component={App}/> 
    <Route path='/favorites' component={Favorites}/> 
    </div> 
    </Switch> 
) } 

2) BrowserRouter geht um die ganze app (wahrscheinlich in Ihrem index.js), die wie folgt aussehen sollte:

import React from "react"; 
import ReactDOM from "react-dom"; 
import { BrowserRouter } from "react-router-dom" OR "react-router" 
import App from "./src/App"; 

ReactDOM.render(<BrowserRouter><App/></BrowserRouter>, document.getElementById("app")); 

3) Die Route Komponenten müssen der direkten Kinder sein Switch, also würde ich versuchen, das div dazwischen zu entfernen. Ich werde mich darum kümmern und diese Antwort aktualisieren, wenn ich es herausgefunden habe.

4) Sie benötigen verknüpfen anstelle eines ein Tag, um die Link-Komponente zu verwenden, um tatsächlich auf die Route der Sie eingerichtet haben:

import { Link } from "react-router-dom" OR "react-router" //not sure what you're using 

...

return(
    <nav className='naviagtion'> 
    <ul className='mainmenu'> 
    ... 
    <li> 
     <Link to="/">home</Link> 
    </li> 
    <li> 
     <Link to="/favorites">favorites</Link> 
    </li> 
    ... 
    </ul> 

)