响应路由到具有不同 URL 的相同组件

Question

在我的主课中，我有一个导航栏，其中包含以下选项：

          <NavDropdown title="Search" id="collasible-nav-dropdown">
            <NavDropdown.Item href="#/searchpage/p" onClick={this.dontEdit}>Find People</NavDropdown.Item>
            <NavDropdown.Item href="#/searchpage/s" onClick={this.searchSchool}>Find Schools</NavDropdown.Item>
            <NavDropdown.Item href="#/searchpage/w" onClick={this.dontEdit}>Find Work Places</NavDropdown.Item>
          </NavDropdown>

它们有一个路由到同一组件的路由，然后该组件读取 URL 末尾的参数并根据值运行不同的搜索。例如，'s' 是搜索学校，'p' 是搜索人。如果我在导航栏的不同搜索功能之间导航，则它不会刷新到新搜索。例如，如果我从“Find Schools”转到“Find Work”，它会留在学校，但如果我要直接转到“Find Work Places”，则它会直接转到那里。此外，如果我导航到主页并返回另一个搜索，那么它就可以工作。

路线看起来像：

<Route path="/searchpage/:type"  render={props => (<SearchPage {...props} findPerson={this.findPerson} routeReset={this.routeReset} getPersonsByName={this.getPersonsByName} />)}/>

有没有人能够建议如何让它按照我的意愿进行路由？搜索组件是这样的：

import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Container from 'react-bootstrap/Container';
import Button from 'react-bootstrap/Button';

import Flash from './components/flash';
import Search from "./components/search";

const searchtypes = {"p":"People","w":"Work Places","s":"Schools"};

class SearchPage extends Component {



  constructor(props) {
    super(props);

    this.state = {
      type:this.props.match.params.type
    }
  }

  componentDidMount(){

  }


  render() {
    return (
      <Container>
        <Row>
          <Col>
            <h4>Search {searchtypes[this.state.type]}</h4>
            <br/>
          </Col>
        </Row>
        <Row><Col><Search {...this.props} type={this.state.type}/></Col></Row>
      </Container>
    );
  }
}

export default SearchPage;

Answer 1

的Route的render道具不会再登当匹配的路由不会改变，即即使路由匹配，但该路由参数是不同也不会重新渲染。而是使用component道具。

react-router-dom 组件

当您使用组件（而不是渲染或子组件，下面）时，路由器使用 React.createElement 从给定组件创建一个新的 React 元素。这意味着如果您为组件 prop 提供内联函数，您将在每次渲染时创建一个新组件。这会导致卸载现有组件并安装新组件，而不仅仅是更新现有组件。使用内联函数进行内联渲染时，请使用 render 或 children 道具（如下）。

<Route
  path="/searchpage/:type"
  component={props => (
    <SearchPage
      {...props}
      findPerson={this.findPerson}
      routeReset={this.routeReset}
      getPersonsByName={this.getPersonsByName}
    />
  )}
/>

另一种方法是实现componentDidUpdate生命周期函数SearchPage以检测路由参数 prop 何时更新并更新存储在 state 中的类型。这样组件就不会每次都不断地卸载/挂载。

componentDidUpdate(prevProps) {
  if (prevProps.match.params.type !== this.props.match.params.type) {
    setState({
      type: this.props.match.params.type,
    });
  }
}