React Router 更改链接但未呈现正确的组件

Question

您好，我正在使用 React Router... 我有两个组件 App.js 和 SideNavComponent。我想单击 SideNavComponent 中的链接并前往正确的组件。

现在，当我单击链接时，它会更改 URL，但不会呈现正确的组件。但是，如果我自己更改 URL，则会呈现正确的视图。

App.js

import React, { Component } from 'react';
import { Col, Well, Panel } from 'react-bootstrap';

import NavbarComponent from './NavbarComponent';
import SideNavComponent from './SideNavComponent';
import Router from './Router';

class App extends Component {
  render() {
    return (
      <div>
        <div className="header">
          <NavbarComponent />
        </div>

        <div className="body">
          <Col md={3}>
            <Well>
              <SideNavComponent />
            </Well>
          </Col>

          <Col md={9}>
            <Panel>
              <Router />
            </Panel>
          </Col>
        </div>

        <div className="footer" />
      </div>
    );
  }
}

export default App;

SideNavComponent

import React, { Component } from 'react';
import { Nav, NavItem } from 'react-bootstrap';
import { Link, BrowserRouter, Switch } from 'react-router-dom';

class SideNavComponent extends Component {
  state = {
    selectedLink: 1
  };

  selectLink(key) {
    this.setState({ selectedLink: key });
  }

  render() {
    return (
        <BrowserRouter>
          <div style={{ flexDirection: 'column' }}>
              <Link to="/">Home</Link>
              <Link to="/device">Device</Link>
              <Link to="/transform">Transformation</Link>
              <Link to="/graph">Graphs</Link>
          </div>
        </BrowserRouter>
    );
  }
}

export default SideNavComponent;

Router.js

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

import HomeComponent from './pages/HomeComponent';
import DeviceComponent from './pages/DeviceComponent';
import TransformationComponent from './pages/TransformationComponent';
import GraphComponent from './pages/GraphComponent';

const Router = () => {
  return (
    <BrowserRouter>
      <div>
        <Switch>
          <Route path="/device" component={DeviceComponent} />
          <Route path="/transform" component={TransformationComponent} />
          <Route path="/graph" component={GraphComponent} />
          <Route exact path="/" component={HomeComponent} />
        </Switch>
      </div>
    </BrowserRouter>
  );
};

export default Router;

Answer 1

问题是您有多个浏览器路由器实例并且历史记录变得混乱。您可以通过重新组织应用程序的结构来解决此问题，如下例所示。

// *-----------------------*
// |  MAIN-APP COMPONENT   |
// *-----------------------*

import React, { Component } from "react";
import { Col, Well, Panel } from "react-bootstrap";
import { Route, Switch } from "react-router-dom";

import SideNavComponent from "./SideNavComponent";

const HomeComponent = () => <div>Home</div>;
const GraphComponent = () => <div>Graph</div>;
const DeviceComponent = () => <div>Device</div>;
const TransformationComponent = () => <div>Transformation</div>;

class App extends Component {
  render() {
    return (
      <div>
        <div className="header" />
        <div className="body">
          <Col md={3}>
            <Well>
              <SideNavComponent />
            </Well>
          </Col>
          <Col md={9}>
            <Panel>
              <Switch>
                <Route path="/device" component={DeviceComponent} />
                <Route path="/transform" component={TransformationComponent} />
                <Route path="/graph" component={GraphComponent} />
                <Route exact path="/" component={HomeComponent} />
              </Switch>
            </Panel>
          </Col>
        </div>
        <div className="footer" />
      </div>
    );
  }
}

export default App;

// *-----------------------*
// | SIDENAV-COMPONENT     |
// *-----------------------*

import React, { Component } from "react";
import { Nav, NavItem } from "react-bootstrap";
import { Link } from "react-router-dom";

class SideNavComponent extends Component {
  render() {
    return (
      <div style={{ flexDirection: "column" }}>
        <Link to="/">Home</Link>
        <Link to="/graph">Graphs</Link>
      </div>
    );
  }
}

export default SideNavComponent;

// *-----------------------*
// | MAIN.JS (ENTRY POINT) |
// *-----------------------*

import React from 'react'
import { render } from 'react-dom'
import App from './components/App';
import { BrowserRouter } from 'react-router-dom';

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