React linked page goes 404 after refreshing it in ASP.NET MVC project

Question

I am trying to figure out why the below page gives 404 error after refreshing it manually (F5). At first it loads properly but if I only refresh this page it goes 404. Its main dependent "Meeting" component does not have such a problem. It refreshes all well. Just to let you know that React app constructed inside a .NET MVC project and only a part of views is handled by React. Any idea what I am supposed to do wrong?

#App.tsx

  import React from 'react'
  import { render } from 'react-dom'
  import { BrowserRouter } from 'react-router-dom'
  import { createBrowserHistory } from "history";
  import MeetingsRoutes from './MeetingsRoutes'

  function renderApp() {
      const history = createBrowserHistory();
      render(
        <BrowserRouter>
            <MeetingsRoutes/>
        </BrowserRouter>
        , document.getElementById('root')
      )
  }

  renderApp();

#MeetingsRoutes.tsx

import * as React from 'react'
import { Route, Switch } from 'react-router-dom'
import Meeting from './meeting/Meeting'
import { Fragment } from 'react';

export interface MeetingsRoutesState {
    history: any;
}

export default class MeetingsRoutes extends React.Component<{}, MeetingsRoutesState> {
    constructor(props: any) {
        super(props);
    }

    public render() {
        return (
            <Fragment>
                <Switch>
                    <Route exact path='/:baseUrl/Meeting' component={Meeting} />
                    <Route path='/:baseUrl/Meeting/:name/:country' component={MeetingDetails} />
                 </Switch>
            </Fragment>
        )
    }
}

score 1 · Answer 1 · edited Jul 29 '22 at 19:53

This happens if you are using SSR. The page which you are viewing in the browser at a specific route is rendered by react router.

For Ex: Home page on /home.

Here when the browser opens / route the react router is activated and then the other route navigation works. To solve this you have to configure your server to redirect all urls to index.html / route which will then activate react router and then route to your specific path /home. See the diagram below for more understanding.

In Node js we do something like this https://stackoverflow.com/questions/26349497/node-express-with-static-html-how-to-route-all-requests-to-index-html.

React linked page goes 404 after refreshing it in ASP.NET MVC project

1 Answers1