반응 라우터가 URL을 변경하지 않음

Question

나는 React (1 weeks : P)를 처음 사용합니다. 나는 검색 용어를 기반으로 API를 때리는 앱을 가지고있다. 이러한 결과에서 사용자는 결과에서 항목을 즐겨 찾기에 추가 할 수 있습니다. 즐겨 찾기 링크를 클릭하면 올바른 구성 요소로 이동하고 URL에이 변경 사항이 반영됩니다. 그러나 항상 정적으로 존재하는 측면 탐색 바에서 새로운 검색어를 입력 할 때 올바른 구성 요소의 수정 정보가 표시되지만 URL은 변경되지 않습니다. 그것은 여전히 ​​http://localhost:3000/favorites이라고 말하고 어디에 이이되어야합니까 http://localhost:3000이어야합니다. 추측을 위험에 빠뜨릴 필요가 있다고 생각되는 것이 더 있다면 알려주십시오. 라우트 :

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

SearchBox 구성 요소 :

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> 
) 

그리고 링크가있는 SideNav 구성 요소 :

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> 
) 

내가 변화하는 URL의 정보를 많이 본 적이 있지만, 렌더링하지 않는 컴퍼넌트 그건 내 문제가 아니야. 그런 다음 구성 요소가 올바르게 렌더링되지만 url은이를 반영하지 않습니다.

편집 : 사이드 바는 홈 구성 요소에서 렌더링되는 위치 여기

입니다. 여기

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

그리고는 도움이되는 App.js

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

Answer 1

몇 가지입니다.

1) 경로 구성 요소는 스위치 구성 요소 안에 있습니다 (가져 오기를 확인하십시오). 또한 "/"에 "정확한 경로"를 사용하십시오. 그렇지 않으면 사용자가 "/ 즐겨 찾기"로 만들지 않습니다.

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

2) BrowserRouter는 다음과 같이 보일 것이다 (아마하는 index.js에서) 전체 앱 주위에 간다 :

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) 경로 구성 요소의 직계 자식해야 할 수도 있습니다 스위치, 그래서 사이에 div 제거하려고합니다. 내가 알아낼 때이 대답을 살펴보고이 대답을 업데이트 할 것입니다. 당신은 실제로에 태그 대신 링크 구성 요소를 사용할 필요가

4) 당신이 설정 한 경로의 링크 :

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> 

)