React-Router-Dom 母版页

Question

我正在尝试使用 react-router-dom 创建母版页。我的 main 页面将有一个 nav-bar，我只想更改内容。所以在我的站点路由器页面中，我有这样的东西：

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>
    );
  }
}

然后在我的 navbar.js 我有链接：

import React from 'react';

import { NavItem, Nav, Navbar } from 'react-bootstrap';

import styled from 'styled-components';

import Particles from 'react-particles-js';
import params from './../../components/particlesjs-config.json';
import {PurposeLogo} from "../media/PurposeLogo";


import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'

const StyledNavbar = styled(Navbar)`

  background-image: linear-gradient(90deg, #320734 0%, #B71F71 100%);
  min-height: 100px;
}
`


export class PurposeNav extends React.Component {
  render(){
    return(
        <StyledNavbar inverse collapseOnSelect fixedTop>
          <Particles
              height={100}
              params={params}
              style={{
                position: "fixed",
                top: 0,
                marginLeft: 700,
                width: "100%",
                height: "100%"
              }} />
          <Navbar.Header>
            <Navbar.Brand>
              <PurposeLogo />
            </Navbar.Brand>
          </Navbar.Header>
          <Navbar.Collapse>
            <Nav pullRight>
              <NavItem><Link to='fund_details'>Fund Details</Link></NavItem>
              <NavItem eventKey={2} href="#">Link Right</NavItem>
            </Nav>
          </Navbar.Collapse>
        </StyledNavbar>
    );
  }
}

所以当我点击 Fund Details 时，应该会显示一个图表。但我什么也得不到。有什么想法吗？

Answer 1

<Switch> 将 "break" 找到匹配项 <Route> 后立即停止匹配。没有路径的路由将始终匹配，因此它下面的任何内容都不会匹配。如果你希望 Main 始终呈现它根本不需要包装在路由中。

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

React-Router-Dom 母版页

React-Router-Dom Master Page

reactjs

react-router

react-router-dom