admin管理员组

文章数量:1291121

I am fairly new to react and I am learning myself by creating this sample app where the user tries to login with credentials, On successful, the user should redirect to the home page where I may display some data. So far I am receiving below error

Uncaught Error: You should not use <Redirect> outside a <Router>

My two ponents look like below

App.js

import React, { Component } from 'react';
import axios from 'axios';
import { Route, Redirect } from 'react-router';
import Home from './Home';
import AuthLogin from './AuthLogin';


class App extends Component {

constructor(){
    super();
    this.state = {
      username: '',
      password: '',
      userdata: [],
      isLogin: false
    };

  this.handleUserChange = this.handleUserChange.bind(this);
  this.handleSubmit = this.handleSubmit.bind(this);
}

handleSubmit(event){
    event.preventDefault();
    axios.post('',{}, {
      auth: {
        username: this.state.username,
        password: this.state.password
      }
    }).then((response) => {
      console.log(response.data);
      this.setState({
        userdata: response.data,
        isLogin:true
      });
    }).catch(function(error) {
      console.log('Error on Authentication' + error);
  });
}

handleUserChange(event){
    this.setState({
      username : event.target.value,
    });
}

handlePasswordChange = event => {
  this.setState({
    password: event.target.value
  });
}

render() {
    if(this.state.isLogin){
      return <Redirect to={{
        pathname: 'home',
        state: this.state.data
      }} />
    }
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          username :
          <input type="text" value={this.state.username} onChange={this.handleUserChange} required/>
        </label>
        <label>
          password :
          <input type="password" value={this.state.password} onChange={this.handlePasswordChange} required/>
        </label>
        <input type="submit" value="LogIn" />
      </form>

    );
  }
}

export default App;

Home.js

import React, { Component } from 'react';
import axios from 'axios';

class Home extends Component {
    state = {
      Search:'',
      results:[]
    }

  getInfo = () => {

    axios.get('',{
    params: {
      q: this.state.Search,
      in:'login',
      type:'Users'
    }
  }).then(({ response }) => {
        this.setState({
          results: response.data.items.login
        })
      })
  }

  handleSearchChange(event){
    this.setState({
      Search: this.state.Search
    }, setInterval(() => {
      if (this.state.Search && this.state.Search.length > 1) {
        if (this.state.Search.length % 2 === 0) {
          this.getInfo();
        }
    }
  },500));

  }

  render(){
  return (
    <div>
      Home page {this.props.data}

    <form>
      <label>
        Search :
        <input type="text" placeholder="Search for..." value={this.state.Search} onChange={this.handleSearchChange} />
      </label>
   </form>
     </div>
  );
}
}

export default Home;

My aim is to get a page after a successful login.

Can I get help? Much appreciated.

Thanks

I am fairly new to react and I am learning myself by creating this sample app where the user tries to login with credentials, On successful, the user should redirect to the home page where I may display some data. So far I am receiving below error

Uncaught Error: You should not use <Redirect> outside a <Router>

My two ponents look like below

App.js

import React, { Component } from 'react';
import axios from 'axios';
import { Route, Redirect } from 'react-router';
import Home from './Home';
import AuthLogin from './AuthLogin';


class App extends Component {

constructor(){
    super();
    this.state = {
      username: '',
      password: '',
      userdata: [],
      isLogin: false
    };

  this.handleUserChange = this.handleUserChange.bind(this);
  this.handleSubmit = this.handleSubmit.bind(this);
}

handleSubmit(event){
    event.preventDefault();
    axios.post('https://api.github./user',{}, {
      auth: {
        username: this.state.username,
        password: this.state.password
      }
    }).then((response) => {
      console.log(response.data);
      this.setState({
        userdata: response.data,
        isLogin:true
      });
    }).catch(function(error) {
      console.log('Error on Authentication' + error);
  });
}

handleUserChange(event){
    this.setState({
      username : event.target.value,
    });
}

handlePasswordChange = event => {
  this.setState({
    password: event.target.value
  });
}

render() {
    if(this.state.isLogin){
      return <Redirect to={{
        pathname: 'home',
        state: this.state.data
      }} />
    }
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          username :
          <input type="text" value={this.state.username} onChange={this.handleUserChange} required/>
        </label>
        <label>
          password :
          <input type="password" value={this.state.password} onChange={this.handlePasswordChange} required/>
        </label>
        <input type="submit" value="LogIn" />
      </form>

    );
  }
}

export default App;

Home.js

import React, { Component } from 'react';
import axios from 'axios';

class Home extends Component {
    state = {
      Search:'',
      results:[]
    }

  getInfo = () => {

    axios.get('https://api.github./search/users',{
    params: {
      q: this.state.Search,
      in:'login',
      type:'Users'
    }
  }).then(({ response }) => {
        this.setState({
          results: response.data.items.login
        })
      })
  }

  handleSearchChange(event){
    this.setState({
      Search: this.state.Search
    }, setInterval(() => {
      if (this.state.Search && this.state.Search.length > 1) {
        if (this.state.Search.length % 2 === 0) {
          this.getInfo();
        }
    }
  },500));

  }

  render(){
  return (
    <div>
      Home page {this.props.data}

    <form>
      <label>
        Search :
        <input type="text" placeholder="Search for..." value={this.state.Search} onChange={this.handleSearchChange} />
      </label>
   </form>
     </div>
  );
}
}

export default Home;

My aim is to get a page after a successful login.

Can I get help? Much appreciated.

Thanks

• javascript
• reactjs
• react-router

Share Improve this question Follow edited Jun 10, 2019 at 18:11 Hannele 9,67677 gold badges5050 silver badges6969 bronze badges asked Sep 4, 2018 at 6:03 rakeeeerakeeee 1,07355 gold badges2020 silver badges4747 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Make sure you enclose your <App/> with <BrowserRouter> in your index.js.

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

(Use: import {BrowserRouter} from 'react-router-dom')

Instead of using Redirect ponent you can use,

this.props.history.push(<path>)

If you need any help about this, you can check this doc -> https://tylermcginnis./react-router-programmatically-navigate/

As your ponent is outside the scope of router, it's history parameter will be null. So to overe that issue, you need to pass a history in you App tag, something like this

import history from './history';
<App history={history}>

In that way you will be able to access the history inside you App class. You will have to create a file: history.js

import createHashHistory from 'history/createBrowserHistory';

export default createHashHistory();

I faced the same issue quite recently. Actually issue is due to multiple version of react-router-dom, so because in that way you will have multiple instances of react-router and therfore it will seem that Redirect is outside Router. One of my dependency was using older version of react-router-dom, by upgrading that version, i was able to solve the issue

本文标签： javascriptReact Redirect should not use outside the routerStack Overflow