Question

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

我已经看到了很多关于网址更改的信息，但是组件没有渲染。那不是我的问题。然后组件正确呈现，但是网址没有反映出来。

修改

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

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

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

App.js

Answer 1

可能会有所帮助的一些事情。

1）Route组件进入Switch组件（确保导入）。此外，请务必使用＆＃34;确切路径＆＃34; for＆＃34; /＆＃34;或者用户不能进入＆＃34; / favorites＆＃34;。

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组件而不是标签来实际链接到您已设置的路线：

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>

）

反应路由器不更改网址

1 个答案: