反应路由器不更改网址

Question

我是React的新手（1周：P）。我有一个应用程序根据搜索词命中api。从这些结果中，用户能够从结果中收藏项目。当我点击收藏夹的链接时，我会转到正确的组件，并且网址会反映此更改。但是，当我输入一个新的搜索词时，从静态的侧面导航栏中，我会在正确的组件中看到更正信息，但是网址不会改变;它仍然说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的信息，但是组件没有渲染。那不是我的问题。然后组件正确呈现，但是网址没有反映出来。

编辑：

这是SideBar在Home Component中呈现的位置。

      <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）Route组件进入Switch组件（确保导入）。另外，请务必使用“确切路径”作为“/”，否则用户将无法使用“/ favorites”。

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）Route组件可能需要是Switch的直接子节点，所以我尝试删除它们之间的div。当我弄明白时，我会调查并更新这个答案。

4）您需要使用Link组件而不是标签来实际链接到您已设置的Route：

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>

)