Реагировать на перенаправление маршрутизатора после отправки формы

Question

Может кто-нибудь сказать мне, как перенаправить на определенный путь, используя реагирующий маршрутизатор в функциональном компоненте, когда я нажимаю ввод в форме ввода, я также хочу передать то, что введено в качестве реквизита, компоненту

Также нет кнопки отправки, просто поле ввода

Мой код действительно дрянной, и я не думаю, что знаю, что делаю, но вот оно:

Приложение. js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

import Index from '../containers/Index';
import User from '../containers/User';

const App = () => {
  return (
    <Router>
      <Switch>
        <Route path='/' exact component={Index} />
        <Route path='/:user' component={User} />
      </Switch>
    </Router>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

Индекс. js

import React, { useState, useEffect } from 'react';
import { withRouter } from 'react-router-dom';

const index = () => {
  const [userState, setUserState] = useState(undefined);
  useEffect(() => {
    setUserState({ user: user });
    console.log(userState);
  }, []);

  let user;
  const handleUser = event => {
    event.preventDefault();
    user = event.target.value;
  };
  console.log(user);
  return (
    <div>
      <h1>github stats</h1>
      <form
        onSubmit={e => {
          e.preventDefault();
          user = e.target.value;
          console.log(user);
        }}
      >
        <input type='text'></input>
      </form>
    </div>
  );
};

export default index;

Пользователь. js

import React, { useState, useEffect } from 'react';
const axios = require('axios');

const user = props => {
  // console.log(props.username);
  const [userState, setUserState] = useState({ user: undefined });
  const token = 'personal access token';
  const query = `
  {
      user(login: "${props.username}"){
      name
      login
      avatarUrl
      repositories(first: 10 orderBy:{
        field: STARGAZERS
        direction: DESC
      }){
        edges{
          node{
            name
          }
        }
      }
    }
  }`;

  useEffect(() => {
    fetchUser();
  }, []);

  const fetchUser = async () => {
    let response = await axios.post(
      'https://api.github.com/graphql',
      { query: query },
      { headers: { Authorization: `Bearer ${token}` } }
    );

    let { data } = response.data;
    console.log(data);
  };
  return <div>hello</div>;
};

export default user;

Answer 1

Во-первых, я думаю, что ваш второй маршрут должен выглядеть следующим образом, чтобы получить user в качестве параметра маршрута

<Route path='/user/:user' component={User} />

Затем внутри вашего Индекса. js Форма onSubmit сделать следующее:

location.replace(`/user/${user}`);

Наконец внутри Пользователь. js сделать:

user(login: "${props.match.params.user}") {...