使用Asp.net MVC响应路由

我刚开始学习React，在Asp.NETMVC中实现React浏览器路由器在页面之间导航时遇到了困难

我使用了相同的结构，但没有将react应用于asp.NETMVC，它工作正常

当我点击链接时，它不会产生任何错误，只是在页面甚至网络活动中没有任何变化

我在MVC中应用的代码如下：

--index.js--

从“/App”导入BodyStructure；
从“react router dom”导入{BrowserRouter}；
ReactDOM.render(
，document.getElementById（'root'）；

--App.js--

从“./Navigation/nav.app”导入导航栏；
从“../RoutingComponent”导入RoutingComponent；
类BodyStructure扩展了React.Component{
render（）{
返回(
);
}
}
导出默认车身结构；

--Nav.app.js--

从'react router dom'导入{Link}；
类导航栏扩展了React.Component{
render（）{
返回(

家
关于

)
}
}
导出默认导航栏

--routingComponent.js--

从'react router dom'导入{Switch，Route}；
从“./src/Home/Home.app”导入HomeStructure；
从“./src/About/About.app”导入AboutStructure；
常量路由组件=（）=>
(
)
导出默认路由组件；

内部routingComponent.js行

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

，

如果我将组件更改为AboutStructure，程序就会理解它，并将主内容id更改为AboutStructure。但是，当url更改时，它不会根据url切换到所需的组件

---

TQM高级版，谢谢您的帮助。我试图搜索与React相关的asp.net MVC链接，但没有找到很多

只是通过参考此链接找到了问题所在

需要在默认路径上添加'exact'关键字，以便路径之间不会混淆路由

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;

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

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;

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