CODEWITHSUNDEEP
javascriptreactjsreact-routerreact-hooksreact-router-v4
m00
m00

Reputation: 317

React router redirect after form submit

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;

Upvotes: 0

Views: 7167

Answers (1)

Radu Chiriac
Radu Chiriac

Reputation: 1424

First, I think that you second route should look like this below in order to grab the user as a route param

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

Then inside your Index.js form onSubmit do the following:

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

Finally inside User.js do: 

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

Upvotes: 1

Related Questions