使用状态和模板文字进行重定向反应

Question

After typing in a team name, I want react to redirect us to the specified page (ie: "teams/this.state.searchText" w/ search text being what the user has typed into the search form). I get a re-render that does nothing/does no redirecting... Can this be done with reacts new v4 Redirect component?

export default class Nav extends React.PureComponent {
constructor(props) {
    super(props);
    this.state = {
        searchText: ''
    }
    this.submit = this.submit.bind(this);
}
onSearchChange = e => {
    console.log(e.target.value)
    this.setState({ searchText: e.target.value });
}

submit = e => {
    e.preventDefault();
    // with the new search state from above, get the state and perform a search with it to local/team/"searchValue"

    e.currentTarget.reset();
}
redirectIt = () => {
    this.props.history.push(`teams/${this.state.searchText}`)
}
render() {
    return (
            <Navbar className="bg-light justify-content-between">
                <Form onSubmit={this.submit}  >
                    <FormControl type="text" placeholder="Search Team" className=" mr-sm-2" onChange={this.onSearchChange} />
                    <Button   type="submit">Submit</Button>
                </Form >
                <div className='logo'>NHL</div>
                <Form inline>
                    <Button type="submit" onClick={this.redirectIt}>Login</Button>
                </Form>
            </Navbar>
    );
}

}

Answer 1

With Redirect, it would look something like this. you could basically tell the browser to go to a different page

import { Redirect } from 'react-router-dom'

export default class Nav extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        searchText: '',
        isRedirected: false
    }
}

onSearchChange = e => {
    console.log(e.target.value)
    this.setState({ searchText: e.target.value });
}

submit = e => {
    e.preventDefault();
    // with the new search state from above, get the state and perform a search with it to local/team/"searchValue"

    e.currentTarget.reset();
}

redirectIt = () => {
    this.setState({isRedirected: true})
}

render() {
    // change the to prop to the next component
    if (this.state.isRedirected) return <Redirect to=`/teams/${this.state.searchText}` />

    return (
            <Navbar className="bg-light justify-content-between">
                <Form onSubmit={this.submit}>
                    <FormControl type="text" placeholder="Search Team" className=" mr-sm-2" onChange={this.onSearchChange} />
                    <Button type="submit">Submit</Button>
                </Form >
                <div className='logo'>NHL</div>
                <Button onClick={this.redirectIt}>Login</Button>
            </Navbar>
    );
}