React Routing With Asp.net MVC

Question

I just started learning React and I`m having difficulties implementing BrowserRouter from React to navigate between pages in Asp.net MVC.

I`ve used the same structure without applying react to asp.net MVC and it is working fine.

It doesnt produce any error, it just doesnt have any changes in the page and even in the network activity when i click on the Link.

My code applied with MVC is as follows:

--index.js--

import BodyStructure from './App';
import { BrowserRouter } from 'react-router-dom';


ReactDOM.render(
<BrowserRouter>
    <BodyStructure />
</BrowserRouter>, document.getElementById('root'));

--App.js--

import NavigationBar from './Navigation/nav.app';
import RoutingComponent from '../routingComponent';

class BodyStructure extends React.Component {

render() {
    return (
        <div>
            <div id="NavigationBar">
                <NavigationBar/>
            </div>
            <div id="MainContent">
                <RoutingComponent/>
            </div>
        </div>
    );
}
}

export default BodyStructure;

--Nav.app.js--

import { Link } from 'react-router-dom';

class NavigationBar extends React.Component {
render() {
    return (
        <div className="navbar navbar-inverse navbar-fixed-top">
            <div className="container">
                <div className="navbar-header">
                    <button type="button" className="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span className="icon-bar"></span>
                        <span className="icon-bar"></span>
                        <span className="icon-bar"></span>
                    </button>

                </div>
                <div className="navbar-collapse collapse">
                    <ul className="nav navbar-nav">
                        <li><Link to="/home">Home</Link></li>
                        <li><Link to="/about">About</Link></li>
                    </ul>
                </div>
            </div>
        </div>
    )
}
}

export default NavigationBar

--routingComponent.js--

import { Switch, Route } from 'react-router-dom';
import HomeStructure from './src/Home/home.app';
import AboutStructure from './src/About/about.app';

const RoutingComponent = () =>
(
    <Switch>
        <Route path="/" component={HomeStructure}/>
        <Route path="/home" component={HomeStructure} />
        <Route path="/about" component={AboutStructure}/>
    </Switch>
)

export default RoutingComponent;

Inside routingComponent.js line

<Route path="/" component={HomeStructure}/>, 

if i change component to AboutStructure the program understands it and change the maincontent id to AboutStructure. But when the url changes, it doesnt switch to the required component based on the url.

Tqvm in advanced for your help. I tried searching for link relating asp.net MVC with React but didnt manage to find a lot.

Answer 1

Just managed to find out the problem by referring to this link React Component not showing on matched Route (react-router-dom)

Need to add 'exact' keyword on the default path so that the routing is not confused between the path.