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>，

<Route>就会从匹配中“中断”。没有路径的路由将始终匹配，因此它下面没有任何内容。如果您希望Main始终呈现它，则根本不需要将其包裹在路径中。

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

React-Router-Dom母版页

1 个答案: