react redirect to url code example

Example 1: redirect in react

import React from 'react'
import  { Redirect } from 'react-router-dom'

const ProtectedComponent = () => {
  if (authFails)
    return <Redirect to='/login'  />
  }
  return <div> My Protected Component </div>
}

Example 2: react redirect to url

import { Route, Redirect } from 'react-router'

<Route exact path="/" render={() => (
  loggedIn ? (
    <Redirect to="/dashboard"/>
  ) : (
    <PublicHomePage/>
  )
)}/>

Example 3: react router redirect

<Route exact path="/">
  {loggedIn ? <Redirect to="/dashboard" /> : <PublicHomePage />}
</Route>

Example 4: react routing and force https

<ifModule mod_rewrite.c>
  #######################################################################
  # GENERAL                                                             #
  #######################################################################
  # Make apache follow sym links to files
  Options +FollowSymLinks
  # If somebody opens a folder, hide all files from the resulting folder list
  IndexIgnore */*
  #######################################################################
  # REWRITING                                                           #
  #######################################################################
  # Enable rewriting
  RewriteEngine On
  # If its not HTTPS
  RewriteCond %{HTTPS} off
  # Comment out the RewriteCond above, and uncomment the RewriteCond below if you're using a load balancer (e.g. CloudFlare) for SSL
  # RewriteCond %{HTTP:X-Forwarded-Proto} !https
  # Redirect to the same URL with https://, ignoring all further rules if this one is in effect
  RewriteRule ^(.*) https://%{HTTP_HOST}/$1 [R,L]
  # If we get to here, it means we are on https://
  # If the file with the specified name in the browser doesn't exist
  RewriteCond %{REQUEST_FILENAME} !-f
  # and the directory with the specified name in the browser doesn't exist
  RewriteCond %{REQUEST_FILENAME} !-d
  # and we are not opening the root already (otherwise we get a redirect loop)
  RewriteCond %{REQUEST_FILENAME} !\/$
  # Rewrite all requests to the root
  RewriteRule ^(.*) /
</ifModule>

Example 5: react redirect

<Redirect to="/somewhere/else" />

Example 6: how to redirect react router from the app components

state = { redirect: null };

render() {
  if (this.state.redirect) {
    return <Redirect to={this.state.redirect} />
  }
  return(
  // Your Code goes here
  )
}

// update the redirect
 this.setState({ redirect: "/someRoute" });