Reactjs 反应路由器Dom母版页

我正在尝试使用

react router dom

创建母版页。我的

main

页面将有一个

nav栏

，我只想更改内容。因此，在我的站点路由器页面中，我有如下内容：

import React from 'react'

import { BrowserRouter, Switch, Route } from 'react-router-dom'

import {FundDetails} from "../pages/fund_detail";
import {Dashboard} from "../pages/dashboard";
import {Main} from "../pages/main";


export class SiteRouter extends React.Component {
  render(){
    return (
        <BrowserRouter>
          <Switch>
            <Route component={Main}/>
            <Route path="/fund_details"          component={FundDetails}      />
            <Route path="/dashboard"          component={Dashboard}      />
          </Switch>
        </BrowserRouter>
    );
  }
}

因此，当我点击

基金详细信息

时，应该会显示一个图表。但我什么也得不到。有什么想法吗？

一旦找到匹配的

就会“中断”匹配。没有路径的路由将始终匹配，因此路径下的任何内容都不会匹配。如果希望

Main

始终渲染，则根本不需要将其包装在路由中

  <BrowserRouter>
    <div>
      <Main />
      <Switch>
        <Route path="/fund_details" component={FundDetails} />
        <Route path="/dashboard" component={Dashboard} />
      </Switch>
    </div>
  </BrowserRouter>

url是否更改为

/fund\u details

？@azium是的，我会尝试做两件事，1）更改为普通，2）只是为了测试看看是否

测试}/>

加载所以你在哪里渲染SiteRouter？哦，哇，更改为工作。为什么呢？

  <BrowserRouter>
    <div>
      <Main />
      <Switch>
        <Route path="/fund_details" component={FundDetails} />
        <Route path="/dashboard" component={Dashboard} />
      </Switch>
    </div>
  </BrowserRouter>