2017-12-31 386 views
0

私はリアクト(1週間:P)を使いました。私は、検索用語に基づいてAPIをヒットするアプリを持っています。これらの結果から、ユーザーは結果からお気に入りアイテムを選択することができます。お気に入りのリンクをクリックすると、正しいコンポーネントが表示され、URLにはこの変更が反映されます。しかし、新しい検索用語を入力すると、常に静的に存在するサイドナビゲーションバーから、正しいコンポーネント内の修正情報が表示されますが、URLは変更されません。それはまだhttp://localhost:3000/favoritesと言います。ここではとなります。http://localhost:3000となります。あなたが推測を危険にさらすために必要と感じるものがそれ以上ある場合は、私に知らせてください。 路線:リアクションルータがURLを変更していない

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はそれを反映していません。

EDIT:サイドバーホームコンポーネントでレンダリングされている場所

ここです。

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

答えて

1

役立つかもしれないカップルの事です。

1)ルートコンポーネントは、スイッチコンポーネント内にあります(必ずインポートしてください)。また、「/」に「正確なパス」を使用することを忘れないでください。そうしないと、ユーザーは「/お気に入り」にしません。ルート要素がの直接の子である必要があります)

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:

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

2)BrowserRouterは次のようになります。これは、おそらくあなたのindex.jsで全体アプリ()を一周しますスイッチ、私はその間に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> 

)を

+0

それでした!ありがとうございました!私のサイドバーは消えてしまった。それは大したことではないし、おそらくそれを解決することができるだろう。しかし、それについてのアドバイスはありますか?それを '/'コンポーネントとしてルートに配置する必要がありますか? –

+0

あなたはどこにリンクしていますか?彼らはサイドバーの一部ですか? –

+0

はい。私の 'Home'コンポーネントでは、サイドバーとメインコンポーネントをレンダリングします。 Mainは、検索結果をレンダリングするコンポーネントです。 –

関連する問題