Question

我有一个位于多个页面上的NavBar，使我可以搜索用户。搜索后，单击它应通过“从react-router-dom链接”将我重定向到用户页面。问题在于这仅在主页上有效，而在从用户页面上单击时无效。

我尝试将WithRouter添加到我所有相关的组件（容器，父母和孩子）中。还尝试摆弄路由路径/确切路径语法无济于事。

*为清楚起见，已删除了组件导入和不相关的代码。

/app.jsx

import React from 'react';
import { Provider } from 'react-redux';
import {
  Route,
  Redirect,
  Switch,
  Link,
  HashRouter,
  withRouter,
} from 'react-router-dom';
import { AuthRoute, ProtectedRoute } from '../utils/route_utils';

const App = () => (
  <div className="main">
    <HashRouter>
      <Switch>
        <AuthRoute exact path="/" component={LoginContainer} />
        <AuthRoute exact path="/signup" component={SignupContainer} />
        <ProtectedRoute exact path="/feed" component={FeedContainer} />
        <ProtectedRoute exact path="/users/:userId" component={GreetingContainer} />
        <ProtectedRoute exact path="/posts/:postId" component={PostShowContainer} />
        <ProtectedRoute exact path="/upload" component={Upload} />
        <ProtectedRoute exact path="/accounts/edit" component={AccountsEditContainer} />
        <Route component={Errors} />
      </Switch>
    </HashRouter>
  </div>
);

export default withRouter(App);

/greeting_container.jsx

import React from 'react';
import { withRouter } from 'react-router-dom';

const mapStateToProps = (state, ownProps) => {
...
};

const mapDispatchtoProps = (dispatch) => ({
....
});

export default withRouter(connect(mapStateToProps, mapDispatchtoProps)(Greeting));

/greeting.jsx

import React from 'react';
import { Link } from 'react-router-dom';
import NavBarContainer from '../nav_bar/nav_bar_container';

class Greeting extends React.Component {
  constructor(props) {
    super(props);
    this.renderPosts = this.renderPosts.bind(this);
  }

  render() {
    if (!this.props.user) return null;
    const profileUser = parseInt(this.props.match.params.userId)
    const user = this.props.user
    return (
      <div className="user-page-container">
        <Modal currentUser={user} />
        <NavBarContainer />
      </div>
}

export default Greeting;

/nav_bar_container.jsx

import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import NavBar from './nav_bar';

const mapStateToProps = (state) => {
....
};

const mapDispatchToProps = (dispatch) => ({
...
});

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(NavBar));

/nav_bar.jsx

import React from 'react';
import { Link, withRouter } from 'react-router-dom';
import NavBarSearch from './nav_bar_search';

const NavBar = (props) => {

  return (
    <div>

              < NavBarSearch
                fetchSearchedUsers={props.fetchSearchedUsers}
                searchResults={props.searchResults}
              />
  </div>
  );
};

export default withRouter(NavBar);

/nav_bar_search.jsx

import React from 'react';
import NavBarSearchResults from './nav_bar_search_results';
import { withRouter } from 'react-router-dom';

class NavBarSearch extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      searchInput: ''
    }
    this.generateSearch = this.generateSearch.bind(this)
  }

  render() {
    return ( 
      <div >
        <input className="search-bar-test" onChange={this.generateSearch}  type="text"  placeholder='Search' />
        {this.state.searchInput ? <NavBarSearchResults
          searchResults={this.props.searchResults}
          handleClick={this.handleClick}
          // key={this.props.searchResults.id}
          /> : null
        }
      </div>
        )
      }
}

export default withRouter(NavBarSearch);

/nav_bar_search_results.jsx

import React from 'react';
import { withRouter, Link } from 'react-router-dom';

const NavBarSearchResults = function({ searchResults, handleClick }) {
  let results = searchResults ? Object.entries(searchResults).map((result) =>
      <Link className="search-links" to={`/users/${result[0]}`} onClick={e => handleClick} key={result[0]}>
    <div className="search-results-item">
      <img className="search-results-image" src={result[1].photoUrl} />
      {result[1].username}
    </div>
      </Link>
  ) : null

  return (
    <div className="search-results-container">
      {results}
    </div>
  );
}

export default withRouter(NavBarSearchResults);

再次，是Nav_Bar_Search_Results.jsx文件中的链接不起作用。该文件从Greeting.jsx文件开始嵌套了多个级别。我正在执行的字符串插值是user_id号。请回想一下，如果我单击并刷新页面，则url参数会更新，并且该页面可以正常运行，但不能仅单击一次即可。

正确的用户页面应按照url参数指定的方式呈现

React-Router-Dom链接在嵌套组件中不起作用。更新网址参数，但点击时不会加载组件。单击后刷新可正常工作

0 个答案: