私はリアクト(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>
それでした!ありがとうございました!私のサイドバーは消えてしまった。それは大したことではないし、おそらくそれを解決することができるだろう。しかし、それについてのアドバイスはありますか?それを '/'コンポーネントとしてルートに配置する必要がありますか? –
あなたはどこにリンクしていますか?彼らはサイドバーの一部ですか? –
はい。私の 'Home'コンポーネントでは、サイドバーとメインコンポーネントをレンダリングします。 Mainは、検索結果をレンダリングするコンポーネントです。 –