How to use Redirect in the new react-router-dom of Reactjs

Question

I am using the last version react-router module  named react-router-dom  that has become the default when developing web applications with React  I want to know how to make a redirection after a POST request  I have been making this code  but after the request  nothing happens  I review on the web  but all the data is about previous versions of the react router  and no with the last update   Code   import React    PropTypes   from  react   import ReactDOM from  react-dom   import   BrowserRouter   from  react-router-dom   import   Redirect   from  react-router   import SignUpForm from        register components SignUpForm   import styles from    PagesStyles css   import axios from  axios   import Footer from        shared components Footer    class SignUpPage extends React Component     constructor props        super props        this state           errors            client            userclient              clientname              clientbusinessname              password              confirmPassword                         this processForm   this processForm bind this       this changeClient   this changeClient bind this          changeClient event        const field   event target name      const client   this state client      client field    event target value       this setState         client                async processForm event        event preventDefault         const userclient   this state client userclient      const clientname   this state client clientname      const clientbusinessname   this state client clientbusinessname      const password   this state client password      const confirmPassword   this state client confirmPassword      const formData     userclient  clientname  clientbusinessname  password  confirmPassword         axios post   signup   formData    headers    Accept    application json             then  response    gt            this setState             errors                           lt Redirect to      gt     Here  nothings happens          catch  error    gt            const errors   error response data errors   error response data errors               errors summary   error response data message           this setState             errors                              render         return          lt div className  styles section  gt           lt div className  styles container  gt             lt img src  require    images lisa principal bg png    className  styles fullImageBackground    gt             lt SignUpForm              onSubmit  this processForm              onChange  this changeClient              errors  this state errors              client  this state client              gt             lt Footer   gt           lt  div gt         lt  div gt                export default SignUpPage

User · Answer

The problem I run into is I have an existing IIS machine. I then deploy a static React app to it. When you use router, the URL that displays is actually virtual, not real. If you hit F5 it goes to IIS, not index.js, and your return will be 404 file not found. How I resolved it was simple. I have a public folder in my react app. In that public folder I created the same folder name as the virtual routing. In this folder, I have an index.html with the following code:

<script>
  {
    localStorage.setItem("redirect", "/ansible/");
    location.href = "/";
  }
</script>

Now what this does is for this session, I'm adding the "routing" path I want it to go. Then inside my App.js I do this (Note ... is other code but too much to put here for a demo):

import React, { Component } from "react";
import { Route, Link } from "react-router-dom";
import { BrowserRouter as Router } from "react-router-dom";
import { Redirect } from 'react-router';
import Ansible from "./Development/Ansible";
import Code from "./Development/Code";
import Wood from "./WoodWorking";
import "./App.css";

class App extends Component {
  render() {
    const redirect = localStorage.getItem("redirect");

    if(redirect) {
      localStorage.removeItem("redirect");
    }

    return (
      <Router>
        {redirect ?<Redirect to={redirect}/> : ""}
        <div className="App">
        ...
          <Link to="/">
            <li>Home</li>
          </Link>
          <Link to="/dev">
            <li>Development</li>
          </Link>
          <Link to="/wood">
            <li>Wood Working</li>
          </Link>
        ...
          <Route
            path="/"
            exact
            render={(props) => (
              <Home {...props} />
            )}
          />
          <Route
            path="/dev"
            render={(props) => (
              <Code {...props} />
            )}
          />
          <Route
            path="/wood"
            render={(props) => (
              <Wood {...props} />
            )}
          />
          <Route
            path="/ansible/"
            exact
            render={(props) => (
              <Ansible {...props} checked={this.state.checked} />
            )}
          />
          ...
      </Router>
    );
  }
}

export default App;

Actual usage: chizl.com

User · Answer

The simplest solution to navigate to another component is  Example  navigates to mails component by click on icon     lt MailIcon    onClick        gt    this props history push   mails         gt

User · Answer

Alternatively  you can use withRouter  You can get access to the history object s properties and the closest  lt Route gt  s match via the withRouter higher-order component  withRouter will pass updated match  location  and history props to the wrapped component whenever it renders   import React from  react  import PropTypes from  prop-types  import   withRouter   from  react-router      A simple component that shows the pathname of the current location class ShowTheLocation extends React Component     static propTypes         match  PropTypes object isRequired      location  PropTypes object isRequired      history  PropTypes object isRequired        render         const   match  location  history     this props      return  lt div gt You are now at  location pathname  lt  div gt           Create a new component that is  connected   to borrow redux    terminology  to the router  const ShowTheLocationWithRouter   withRouter ShowTheLocation    Or just   import   withRouter   from  react-router-dom   const Button   withRouter    history      gt       lt button     type  button      onClick       gt    history push   new-location         gt      Click Me     lt  button gt

User · Answer

To navigate to another component you can use this props history push   main     import React    Component  Fragment   from  react   class Example extends Component      redirect         this props history push   main          render         return          lt Fragment gt           this redirect           lt  Fragment gt                   export default Example

User · Answer

react     16 3 2    react-dom     16 3 2    react-router-dom     4 2 2    For navigate to another page  About page in my case   I installed prop-types  Then I import it in the corresponding component And I used this context router history push   about   And it gets navigated   My code is   import React    Component   from  react   import     assets mystyle css   import   Redirect   from  react-router   import PropTypes from  prop-types    export default class Header extends Component          viewAbout            this context router history push   about             render             return                lt header className  App-header  gt                   lt div className  myapp menu  gt                       lt input type  button  value  Home    gt                       lt input type  button  value  Services    gt                       lt input type  button  value  Contact    gt                       lt input type  button  value  About  onClick       gt    this viewAbout        gt                   lt  div gt               lt  header gt                    Header contextTypes         router  PropTypes object

User · Answer

Here a small example as response to the title as all mentioned examples are complicated in my opinion as well as the official one   You should know how to transpile es2015 as well as make your server able to handle the redirect  Here is a snippet for express  More info related to this can be found here   Make sure to put this below all other routes   const app   express    app use express static  distApp             Enable routing with React      app get       req  res    gt      res sendFile path resolve  distApp    index html           This is the  jsx file  Notice how the longest path comes first and get s more general  For the most general routes use the exact attribute      Relative imports import React from  react   import ReactDOM from  react-dom   import   BrowserRouter  Route  Switch  Redirect   from  react-router-dom       Absolute imports import YourReactComp from    YourReactComp jsx    const root   document getElementById  root     const MainPage       gt       lt div gt Main Page lt  div gt      const EditPage       gt       lt div gt Edit Page lt  div gt      const NoMatch        gt       lt p gt No Match lt  p gt      const RoutedApp        gt       lt BrowserRouter  gt       lt Switch gt         lt Route path   items  id  component  EditPage    gt         lt Route exact path   items  component  MainPage    gt                   lt Route path   yourReactComp  component  YourReactComp    gt         lt Route exact path     render       gt    lt Redirect to   items    gt      gt                   lt Route path     component  NoMatch    gt                 lt  Switch gt     lt  BrowserRouter gt      ReactDOM render  lt RoutedApp   gt   root

User · Answer

You have to use setState to set a property that will render the  lt Redirect gt  inside your render   method   E g   class MyComponent extends React Component     state         redirect  false        handleSubmit          axios post              then      gt  this setState   redirect  true             render          const   redirect     this state        if  redirect           return  lt Redirect to   somewhere   gt                return  lt RenderYourForm  gt       You can also see an example in the official documentation  https   reacttraining com react-router web example auth-workflow    That said  I would suggest you to put the API call inside a service or something  Then you could just use the history object to route programatically  This is how the integration with redux works   But I guess you have your reasons to do it this way

User · Answer

Hi if you are using react-router v-6 0 0-beta or V6   in This version Redirect Changes to Navigate like this import   Navigate   from  react-router-dom      like this CORRECT in v6 import   Redirect   from  react-router-dom      like this CORRECT in v5 import   Redirect   from  react-router-dom      like this WRONG in v6    This will give you error in V6 of react-router and react-router dom please make sure use both same version in package json    quot react-router quot    quot  6 0 0-beta 0 quot       Like this  quot react-router-dom quot    quot  6 0 0-beta 0 quot      like this   this above things only works well in react Router Version 6

User · Answer

Simply call it inside any function you like    this props history push   main

User · Answer

React Router v5 now allows you to simply redirect using history push   thanks to the useHistory   hook   import   useHistory   from  react-router   function HomeButton       let history   useHistory      function handleClick         history push   home          return        lt button type  button  onClick  handleClick  gt        Go home      lt  button gt

User · Answer

Alternatively  you can use React conditional rendering   import   Redirect   from  react-router   import React    Component   from  react    class UserSignup extends Component     constructor props        super props       this state           redirect  false           render       lt React Fragment gt       this state redirect  amp  amp   lt Redirect to   signin    gt         you will be redirected to signin route    lt  React Fragment gt

User · Answer

Try something like this    import React    PropTypes   from  react   import ReactDOM from  react-dom   import   BrowserRouter   from  react-router-dom   import   Redirect   from  react-router   import SignUpForm from        register components SignUpForm   import styles from    PagesStyles css   import axios from  axios   import Footer from        shared components Footer    class SignUpPage extends React Component     constructor props        super props        this state           errors            callbackResponse  null        client            userclient              clientname              clientbusinessname              password              confirmPassword                         this processForm   this processForm bind this       this changeClient   this changeClient bind this          changeClient event        const field   event target name      const client   this state client      client field    event target value       this setState         client                processForm event        event preventDefault         const userclient   this state client userclient      const clientname   this state client clientname      const clientbusinessname   this state client clientbusinessname      const password   this state client password      const confirmPassword   this state client confirmPassword      const formData     userclient  clientname  clientbusinessname  password  confirmPassword         axios post   signup   formData    headers    Accept    application json             then  response    gt            this setState             callbackResponse   response data                        catch  error    gt            const errors   error response data errors   error response data errors               errors summary   error response data message           this setState             errors                            const renderMe       gt   return  this state callbackResponse     lt SignUpForm              onSubmit  this processForm              onChange  this changeClient              errors  this state errors              client  this state client              gt     lt Redirect to      gt        render         return          lt div className  styles section  gt           lt div className  styles container  gt             lt img src  require    images lisa principal bg png    className  styles fullImageBackground    gt            renderMe               lt Footer   gt           lt  div gt         lt  div gt                export default SignUpPage

User · Answer

I found that place to put the redirect complent of react-router is in the method render  but if you want to redirect after some validation  by example  the best way to redirect is using the old reliable  window location href  i e   evalSuccessResponse data      if data code   200       window location href   urlOneSignHome      else         TODO Something             When you are programming React Native never will need to go outside of the app  and the mechanism to open another app is completely different

User · Answer

you can write a hoc for this purpose and write a method call redirect  here is the code    import React   useState  from  react   import  Redirect  from  react-router-dom    const RedirectHoc    WrappedComponent    gt       gt        const  routName  setRoutName    useState          const redirect    to    gt            setRoutName to                if  routName            return  lt Redirect to        routName   gt            return            lt  gt               lt WrappedComponent redirect  redirect   gt           lt   gt             export default RedirectHoc

[javascript] How to use Redirect in the new react-router-dom of Reactjs

Examples related to javascript

Examples related to reactjs

Examples related to react-router