如何根据字段的值更改路由

Question

我正在尝试在具有多个页面的应用程序中创建一个搜索页面，我使用 react router v5。

我的问题如下，我想在文本字段为空时返回上一页，否则如果输入字段中有条目，我想返回搜索页面（'/search'）

提前感谢您的帮助和回答。

所以我使用 goBack 和 push 道具。 但是即使字段为空也不能返回上一页

我的组件 Routes.js

 const Routes = (props) => {
    return (
       <div>
          <Route exact path="/" component={Home} />
          <Route
             exact
             path='/search'
             component={() => <Search query={props.text} />}
          />
          <Route path="/film/:id" component={MovieDetail} />  
          <Route path="/FavorisList" component={WatchList} />
          <Route path="/search/:search" component={Search} />
          <Route path="*" component={NotFound} />  
       </div>

  )}

我的组件 SearchBar.js

  class SearchBar extends React.Component {
      constructor(props) {
         super(props);

         this.state = {
            inputValue:'',
         };

       }

      handleChange = (event) => {

          if(event.target.value === '') {
              this.props.history.goBack()
              return;
          }

          if(event.target.value.length){
             this.props.history.push("/search")
             this.search(event.target.value)
          }
       }

       search = (query) => {
           //search results retrieved with redux 
           this.props.applyInitialResult(query, 1)
       }

       render() {
          return (
            <div>
               <input
                   type="text"
                   value={this.state.inputValue}
                   placeholder="Search movie..."
                   className={style.field}
                   onChange={this.handleChange.bind(this)}
               />  
            </div>
          );
        }


       export default SearchBar;

组件 App.js

       class App extends React.Component {
          render(){
              return (
                 <div>
                    <BrowserRouter>
                       <NavBar />
                       <Routes/>
                    </BrowserRouter>
                 </div>
              );
           }
        }

        export default App;

Answer 1

我认为问题在于您在每次更改事件时将新条目推送到 history。所以如果你例如输入 3 个字符，然后将 3 个相同的条目推送到 history 堆栈。因此，当您随后调用 history.goBack 时，它会重定向到历史堆栈中的上一个条目，在您的情况下为 /search（因此您保留在当前页面上）。

您可以将历史堆栈视为包含条目的数组 - 当您输入 3 个字符时，该数组将如下所示： ['/someInitialPath', '/search', '/search', '/search'] 调用goBack 会重定向到历史堆栈中的上一个路径，因此如果您现在调用goBack，您会得到指向当前页面的/search 路径的路径，因此您看不到任何变化。在这种情况下，如果您调用 goBack 3 次，您将被重定向到 /someInitialPath。

解决方案是仅在第一个 change 事件上调用 history.push。您可以在state 中添加附加字段，指示是否首次调用handleChange。像这样的：

class SearchBar extends React.Component {
     constructor(props) {
         super(props);

         this.state = {
            inputValue:'',
            initialChange: true
         };

      }

      handleChange = (event) => {

          if(event.target.value === '') {
              this.props.history.goBack()
              this.setState({ initialChange: true }) // clear flag after redirect
              return;
          }

          if(event.target.value.length && this.state.initialChange){
             this.setState({
               initialChange: false
             }, () => {
               this.props.history.push("/search")
               this.search(event.target.value)
             })

          }
       }
    ... 
}