当使用React-Router提交输入值时更改路由

Question

我有一个带有导航栏组件的顶栏菜单，另一个组件由具有文本输入的窗体组成，该窗体包含一个文本输入，用于更改父导航到的应用程序组件的状态。 Nav位于路由器之外，它具有更改路由的链接。

NAV：

import React from 'react'; 
 
import {NavLink} from 'react-router-dom'; 
 
import SearchInput from './search-input'; 
 

 
var Nav = (props) =>{ 
 
\t return(
 

 
\t \t \t <nav className="top-bar main-navigation"> 
 
\t \t \t \t <div className="top-bar-left"> 
 
\t \t \t \t <ul className="menu"> 
 
\t \t \t \t \t <li> 
 
\t \t \t \t \t \t <NavLink className='logoText' exact to='/'> 
 
\t \t \t \t \t \t \t some text 
 
\t \t \t \t \t \t </NavLink> 
 
\t \t \t \t \t </li> 
 
\t \t \t \t \t <li> 
 
\t \t \t \t \t \t <SearchInput search={props.executeSearch}/> 
 
\t \t \t \t \t </li> 
 
\t \t \t \t </ul> 
 
\t \t \t \t </div> 
 
\t \t \t </nav> 
 
\t) 
 
} 
 

 
export default Nav;

父组件传递的功能，NAV和NAV到搜索输入，这改变了应用程序的状态。当表单提交时，我需要将路由重定向到一个名为'/ search'的新路由，但是我无法设置重定向到使用来自react-router的重定向搜索。

这里是应用程序组件和搜索栏组件：

APP：

import React,{Component} from 'react' 
 
import ReactRouter, {BrowserRouter, Route, Switch, Redirect} from 'react-router-dom'; 
 
var Router = BrowserRouter; 
 

 

 
import api from '../api/api'; 
 

 
import Nav from './nav'; 
 
import GameView from './main-view'; 
 
import Home from'./home'; 
 
import Search from './search'; 
 

 

 

 
class App extends Component { 
 
    constructor(props){ 
 
    super(props); 
 
    this.state={ 
 
     searchResult:null, 
 
     redirect:false 
 
    } 
 
    this.search= this.search.bind(this); 
 
    } 
 

 
    search(term,type){ 
 
    api.searchElements(term,type) 
 
     .then((searchResult)=>{ 
 
     console.log(searchResult); 
 
     this.setState({searchResult}); 
 
     }) 
 
     .catch((e)=>{ 
 
     console.log(e); 
 
     }) 
 
    } 
 

 
    render() { 
 

 

 
    return (
 
     <Router> 
 
     <div> 
 
      <Nav executeSearch={this.search}/> 
 
      <Switch> 
 

 
      <Route exact path='/' component={Home}/> 
 
      <Route path='/main' component={MainView}/> 
 
      <Route path='/search' component={Search}/> 
 

 
      </Switch> 
 
     </div> 
 
     </Router> 
 
    ) 
 
    } 
 
    componentDidMount() { 
 
    document.title = 'My page'; 
 
    } 
 
} 
 

 
module.exports = App;

import React, {Component} from 'react'; 
 
import ReactRouter, {Redirect} from 'react-router-dom'; 
 

 
import api from '../api/api'; 
 

 
export default class SearchInput extends Component{ 
 
\t constructor(props){ 
 
\t \t super(props); 
 

 
\t \t this.state = { 
 
\t \t \t term: null 
 
\t \t } 
 
\t } 
 
\t onInputTerm(term){ 
 
\t \t this.setState({term}); 
 
\t } 
 
\t onSumbitTerm(term){ 
 
\t \t this.props.search(term,'games'); 
 
\t } 
 
\t render(){ 
 
\t \t return(
 
\t \t \t \t <div className='search-bar' > 
 
\t \t \t \t \t <form 
 
\t \t \t \t \t \t onSubmit={(e)=>{ 
 
\t \t \t \t \t \t \t \t e.preventDefault(); 
 
\t \t \t \t \t \t \t \t this.onSumbitTerm(e.target.searchValue.value); 
 
\t \t \t \t \t \t \t }} 
 
\t \t \t \t \t > 
 
\t \t \t \t \t \t <input 
 
\t \t \t \t \t \t \t name='searchValue' 
 
\t \t \t \t \t \t \t type='text' 
 
\t \t \t \t \t \t \t onChange={(e)=>{this.onInputTerm(e.target.value)}} 
 
\t \t \t \t \t \t /> 
 
\t \t \t \t \t </form> 
 
\t \t \t \t </div> 
 
\t \t \t); 
 
\t } 
 
}

我很新反应，对不起，如果我提问真的很愚蠢。提前致谢。

Answer 1

那么我不明白你确切的业务问题。但似乎您需要在提交表单时进行一些程序化导航。你需要做的是通过传递一个负责编程导航的回调函数来调用动作创建器。然后在动作创建者内部解决承诺后，只需调用回调函数进行导航。下面给出一个例子。

以下是表单提交功能。

onSubmit(values) { 
    this.props.createPost(values,() => { 
     this.props.history.push('/'); 
    }); 
    } 

这里是行动的创建者，其调用获取传递到它的回调函数，当承诺被解析为导航到不同的URL。

export function createPost(values, callback) { 
    const request = axios.post(`${ROOT_URL}/posts`, values) 
    .then(() => callback()); 

    return { 
    type: CREATE_POST, 
    payload: request 
    }; 
} 

希望这会有所帮助。快乐的编码！