React router dom - 表单 onSubmit 将输入值传递给另一个组件并重定向到该组件

Question

这是我的应用程序组件，它呈现一个输入供用户输入。我想要实现的是，用户输入的任何输入都将传递给Films 组件。然后该文本将用作查询参数以从 api 端点获取数据

import React, { useState } from "react";
import Films from "../Films";
import { BrowserRouter as Router, Route } from "react-router-dom";
import "./style.css";

const App = () => {
  const [text, setText] = useState("");
  const [redirect, setRedirect] = useState(false);

    const onSubmit = (event) => {
       setRedirect(true);
    };
  return (
    <Router>
      <div>
        <p className="films-analysis-service">Films Analysis Service </p>
        <form id="input-form" onSubmit={onSubmit}>
          <input 
            type="text" 
            id="input-box" 
            value={text} 
            onChange={(e) => setText(e.target.value)}
          />
          <button className="button" type="submit">
            Search
          </button>
        </form>
        {redirect && (
          <Route
            exact
            path="/films"
            render={(props) => <Films text={text} />}
          />
        )}
      </div>
    </Router>
  );
};

export default App;

这是我的电影组件：

import React, { useEffect, useState } from "react";

import "./style.css";

const axios = require("axios");
    
const Films = ({ text }) => {

  const [movies, setMovies] = useState([]);
  const fetchMoviesByDirectorName = () => {
    let config = {
      headers: { Authorization: apiKey },
      params: {
        directorName: text, //the text that is passed down from App component
      },
    };

    axios.get(filmsEndpointURL, config);
  };

  useEffect(() => {
    fetchMoviesByDirectorName();
  }, [movies]);

  return (
    ...

  );

};
export default Films;

目前我只是试图打印出我会返回的数据，但不幸的是我认为我的输入值没有正确传递。我不认为我对Route 的使用是正确的......而且它没有重定向到/films 组件。我应该对我的 App.js 做哪些更改？

Answer 1

1. 确保在onSubmit 中执行event.preventDefault()

const onSubmit = (event) => {
       event.preventDefault(); //<----- like this
       setRedirect(true);
    };

1. 您可以使用Redirect 导航到Films 而不是Route。

重构代码（使用重定向）

<Router>
  <div>
    <p className="films-analysis-service">Films Analysis Service </p>
    <form id="input-form" onSubmit={onSubmit}>
      <input
        type="text"
        id="input-box"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <button className="button" type="submit">
        Search
      </button>
    </form>
    <Route exact path="/films" render={(props) => <Films text={text} {...props}/>} /> //<----see here
    {redirect && <Redirect to="/films" />} //<----see here
  </div>
  <Route></Route>
</Router>;

1. 您也可以使用history 对象导航到Films

import { createBrowserHistory } from "history";

const customHistory = createBrowserHistory();

const App = () => {
  const [text, setText] = useState("");
  const [redirect, setRedirect] = useState(false);

  const onSubmit = (event) => {
    //  setRedirect(true);//<----no need
    customHistory.push("/films");
  };
  return (
    <Router history={customHistory}>
      <div>
        <p className="films-analysis-service">Films Analysis Service </p>
        <form id="input-form" onSubmit={onSubmit}>
          <input
            type="text"
            id="input-box"
            value={text}
            onChange={(e) => setText(e.target.value)}
          />
          <button className="button" type="submit">
            Search
          </button>
        </form>
        <Route exact path="/films" render={(props) => <Films text={text} />} />
      </div>
    </Router>
  );
};

export default App;