Can anyone tell me how to redirect to a certain path using react router in functional component when i press enter on a form input, i also want to pass whatever is entered as a prop to the component

Also there is no submit button just the input field

My code is really crappy and i don't think i know what i'm doing but here it is:

App.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'));

Index.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;

User.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;