title: React-router: How to enter direct path without using Link
body: <p>I have a small react app.
  in the app, I have a login form.</p>
  
  <p>I have 3 pages as seen in the router at <code>App</code> component below.
  The issue is that I can't access any URL beside the <code>/</code> path.
  If I try to enter <code>/login</code> or <code>/mechinasetup</code> I receive 404 error.</p>
  
  <p>Now, in localhost it works great, I can enter all the paths but on the server, I can enter only to <code>/</code> path.</p>
  
  <p>If I enter a <code>Link</code> to the main page it will take me to the login page.
  I don't want to add to the main page a link to the login page, I want the user to be able to see the <code>/login</code> by typing <code>/login</code>.</p>
  
  <p>in the <code>login</code>  and <code>MechinaSetup</code> components I have a redirect script that checks the local storage and according to the value there it will redirect the user if needed (code below). </p>
  
  <p>How can I to this redirect without using <code>&lt;Link&gt;</code>?</p>
  
  <pre><code>import React, { Component } from 'react';
  import { BrowserRouter , Route, Switch } from 'react-router-dom';
  import Calc from './components/Calc';
  import Login from './components/auth/Login';
  import MechinaSetup from './components/adminarea/MechinaSetup';
  import './App.css';
  class App extends Component {
    render() {
      return (
        &lt;BrowserRouter basename="/calc"&gt;
          &lt;Switch&gt;
            &lt;Route exact path="/" component={Calc}  /&gt;
            &lt;Route path="/login" component={Login} /&gt;
            &lt;Route path="/mechinasetup" component={MechinaSetup} /&gt;
          &lt;/Switch&gt;
        &lt;/BrowserRouter&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>in short, this is the function that should redirect the login page</p>
  
  <pre><code>  redirectUser = auth =&gt; {
      if (auth === false) {
        this.props.history.push("/login");
      }
    };
  </code></pre>
  
  <p>I am using <code>history.push</code> as suggested in this question:
  <a href="https://stackoverflow.com/questions/31079081/programmatically-navigate-using-react-router?rq=1">Programmatically navigate using react router</a></p>
  
  <p><strong>entire components</strong></p>
  
  <p>login component - the redirect function called <strong>redirectUser</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import ReactDOM from 'react-dom';
  import { Redirect, Link } from 'react-router-dom';
  import {connect} from 'react-redux';
  
  import { userLogedIn } from '../../actions'; 
  import {
      Button,
      Form,
      FormGroup,
      FormControl,
      Col,
      Checkbox,
      ControlLabel,
      HelpBlock,
      Container,
      Row
  } from 'react-bootstrap';
  
  class LoginForm extends Component {
  
      state={
          username: '',
          password: '',
          data: [],
          auth: false
      }
  
      componentWillMount(){
         const auth = localStorage.getItem('auth');
  
         localStorage.getItem('auth') === 'true' ? 
         this.props.userLogedIn(this.props): console.log('xxx');
      }
  
      componentDidUpdate(){
          this.redirectUser(this.props.user.auth);
       }
  
      onSubmitLogin = (event) =&gt; {
          // let auth = this.state.auth;
  
          event.preventDefault();
          fetch('./api/user_switch/' + this.state.username + 
          '/'+ this.state.password )
          .then(response =&gt; response.json())
          .then(json =&gt; {
              if(json.count &gt; 0)
              {
                  this.props.userLogedIn(this.props)
  
              }
          })
          .catch(error =&gt; console.log('parsing faild', error))
  
      }
  
      onChange(event){
          this.setState({
              [event.target.name]: event.target.value
          })
      }
  
      redirectUser = (auth) =&gt;{
          if(auth === true){
              localStorage.setItem('auth', true);
              localStorage.setItem('username', this.state.username);
              localStorage.setItem('password', this.state.password);
              this.props.history.push("/mechinasetup");
          }
      }
  
      render() {
          return (
              &lt;Container id="LoginForm" className="align-middle" style={loginForm}&gt;
              &lt;h1 className="text-center"&gt;כניסה לניהול מחשבון מכינה&lt;/h1&gt;
                  &lt;Row className="show-grid justify-content-center"&gt;
                      &lt;Col xs={8}&gt;
                          &lt;Form&gt;
                              &lt;FormGroup  controlId="formHorizontalusername"&gt;
                                      &lt;Col xs={12} componentclass={'aa'} className="text-right"&gt;
                                          דואר אלקטרוני:
                                      &lt;/Col&gt;
  
                                      &lt;Col xs={12}&gt;
                                      &lt;FormControl 
                                          ref="username" 
                                          name="username" 
                                          type="text" 
                                          onChange={this.onChange.bind(this)} 
                                          placeholder="הקלד דואר אלקטרוני"/&gt;
  
                                      &lt;/Col&gt;
  
                                  &lt;/FormGroup&gt;
                                  &lt;FormGroup controlId="formHorizontalPassword" &gt;
                                      &lt;Col xs={12} componentclass={'cc'} className="text-right"&gt;
                                          סיסמא:
                                      &lt;/Col&gt;
                                      &lt;Col xs={12}&gt;
                                      &lt;FormControl ref="password" name="password" type="password" onChange={this.onChange.bind(this)} placeholder="הקלד סיסמא"/&gt;
  
                                      &lt;/Col&gt;
  
                                  &lt;/FormGroup&gt;
                                  &lt;FormGroup&gt;
                                      &lt;Col &gt;
  
                                          &lt;Button onClick={this.onSubmitLogin} type="submit" className="full-width-btn" id="loginSubmit" block&gt;התחבר&lt;/Button&gt;
                                      &lt;/Col&gt;
                                  &lt;/FormGroup&gt;
                          &lt;/Form&gt;
                      &lt;/Col&gt;
                  &lt;/Row&gt;
              &lt;/Container&gt;
          );
      }
  }
  
  const loginForm = {
      height: '100vh'
  }
  const mapStateToProps = (state) =&gt;{
      return{
          user: state.user
      }
  }
  
  const mapDispatchToProps = dispatch =&gt; {
      return {
          userLogedIn: (params) =&gt; dispatch(userLogedIn(params))
      };
  };
  
  
  export default connect(mapStateToProps, mapDispatchToProps)(LoginForm);
  </code></pre>
  
  <p>MechinaSetup Component- the redirect function called <code>redurectUser</code></p>
  
  <pre><code>import React, { Component } from "react";
  import { connect } from "react-redux";
  import {
      Container,
    Form,
    Button,
    Col,
    Row,
    Table,
    striped,
    bordered,
    hover
  } from "react-bootstrap";
  
  import { logOut, addCourse } from "../../actions";
  import Courses from "./AdminCourses";
  import Head from '../layout/Header';
  
  class MechinaSetup extends Component {
    state = {
      id: Math.random(),
      courseName: '',
      courseWeeklyHours: '',
      courseType: false
    };
  
    redirectUser = auth =&gt; {
      if (auth === false) {
        this.props.history.push("/login");
      }
    };
  
    onChange = e =&gt; {
      this.setState({
        [e.target.name]: e.target.value
      });
    };
  
  
  
  
    render() {
      const headerTitle = 'מחשבון מכינה';
      const Logout = true;
      return (
  
        &lt;div&gt;
          &lt;Head headerTitle={headerTitle} isLogOut={Logout}/&gt;
  
          {/* if user is not logged in redirect him to login page */}
          {this.redirectUser(this.props.user.auth)} 
  
          &lt;Courses /&gt;       
        &lt;/div&gt;
      );
    }
  }
  
  const mapStateToProps = state =&gt; {
    return {
      user: state.user,
      courses: state.courses
    };
  };
  
  export default connect(
    mapStateToProps,
    { logOut }
  )(MechinaSetup);
  </code></pre>