如何在 React 中重定向和传递数据作为表单提交的道具？

Question

我有这样一个功能组件：

const SearchForm = () => {
    //stuffs

    const handleSubmit = e => {
        e.preventDefault();
        fetchData();
        return <Redirect to='/search' data={fetchedData} />
    }


    return (
        <div>
            <form onSubmit={ handleSubmit }>
                <div className='input-field'>
                <input placeholder="Search whatever you wish" 
                    type="text"
                    value={keyword}
                    onChange={(e) => setKeyword(e.target.value)}
                    className='searchfield center-align white-text'
                />
                </div>
            </form>
        </div>
    )
}

export default SearchForm;

提交表单后，我希望将页面重定向到 /search，并且我希望 fetchedData 与其一起传递。我尝试使用 react-router-dom 中的 Redirect 组件，但它似乎不起作用。任何修复？

Answer 1

这是通过在 to prop 中传递 state 对象来实现的：

<Redirect
  to={{
    pathname: "/search",
    state: { data:fetchedData}
  }}
/>

Answer 2

你可以通过两种方式

1.

  const SearchForm = () => {
        //stuffs

        const [redirect, setRedirect] = useState(false);
        const [data, setData] = useState();

        const handleSubmit = e => {
            e.preventDefault();
            fetchData();
            setRedirect(true);
            setData(e);
        }
        if (redirect)
            return <Redirect to={{ pathname: '/search', data: { data } }} />

        return (
            <div>
                <form onSubmit={handleSubmit}>
                    <div className='input-field'>
                        <input placeholder="Search whatever you wish"
                            type="text"
                            value={keyword}
                            onChange={(e) => setKeyword(e.target.value)}
                            className='searchfield center-align white-text'
                        />
                    </div>
                </form>
            </div>
        )
    }

    export default SearchForm;

2.

const SearchForm = (props) => {
    //stuffs

    const [redirect, setRedirect] = useState(false);
    const [data, setData] = useState();

    const handleSubmit = e => {
        e.preventDefault();
        fetchData();
        props.history.push({
            pathname: '/search',
            state:
            {
                //your data
            }
        })
    }

    return (
        <div>
            <form onSubmit={handleSubmit}>
                <div className='input-field'>
                    <input placeholder="Search whatever you wish"
                        type="text"
                        value={keyword}
                        onChange={(e) => setKeyword(e.target.value)}
                        className='searchfield center-align white-text'
                    />
                </div>
            </form>
        </div>
    )
}

export default SearchForm;

Answer 3

您不能在后备函数中使用 <Redirect /> 组件，因为它是一个组件，不能在那里呈现。如果你正在使用 react-router-dom，你可以很容易地使用它的钩子将用户重定向到另一个路由。使用钩子更简单，并使您的组件易于阅读。

试试这个：

import { useHistory } from "react-router-dom";

const SearchForm = () => {
    const { push } = useHistory();
    //stuffs

    const handleSubmit = e => {
        e.preventDefault();
        fetchData();
        push({
            pathname: '/search',
            state: {
                data: fetchedData
            }
        })
    }


    return (
        <div>
            <form onSubmit={handleSubmit}>
                <div className='input-field'>
                    <input placeholder="Search whatever you wish"
                        type="text"
                        value={keyword}
                        onChange={(e) => setKeyword(e.target.value)}
                        className='searchfield center-align white-text'
                    />
                </div>
            </form>
        </div>
    )
}

如何在 React 中重定向和传递数据作为表单提交的道具？

How to redirect and pass data as props on form submit in React?

reactjs

react-router-v4

react-router-dom