Qfyilyi

I have created one website with Asp.Net Core and typescript/webpack/react in vs 2017.

Basically, I have 3 pages: Home Index Page, Login Page and Dashboard in my website. Home page is the main page to render react app.

If user logs in, the Dashboard component will be rendered and if not then the login component will be rendered in Home Index view.

Below is my main app that list out routes:

export class App extends React.Component<{}, {}> {

  constructor(props) {

    super(props);

  }



  public render() {

    return (

      <div >

        <Route exact path="/" component={Login} />

        <Route exact  path="/login" component={Login} />

        <Layout>

          <PrivateRoute exact path="/dashboard" component={Dashboard} />

        </Layout>

      </div>

    );

  }

}

and PrivateRoute is like:

export const PrivateRoute = ({ component: Component, ...rest }) => (

  <Route {...rest} render={props => (

    localStorage.getItem('user') ?

      <Component {...props} /> : 

      <Redirect to={{ 

        pathname: '/login', 

        state: { from: props.location } 

      }} />

    )}/>

)

This is working like if not logged in, then it goes back to login component (inside Home Index) url. But issue is, if I just refresh that page from browser (localhost:1234/login), then it tries to find this /login in MVC Routing so it gives me error like below:

If I remove Redirect from PrivateRoute then it works properly. So I think the issue is with MVC routing takes place for redirect.