React NavLink 不渲染组件

Question

我正在研究退休计算器。它有一个带有链接的导航组件，我在 App.js 中设置了一个带有路径的路由器。但是导航链接不起作用。我不确定代码有什么问题。请帮助我是 reactjs 的新手

App.js

import logo from './logo.svg';
import './App.css';
import InputForm from './InputForm';
import Navigation from './Navigation';
import 'bootstrap/dist/css/bootstrap.min.css';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import DisplayTable from './DisplayTable';
import RetirementComaparisionForm from './RetirementComparisionForm';

function App() {
  return (
    <BrowserRouter>
      <div className="App">
      
      <Navigation />
      
      <Switch>
        <Route exact path = "/" component = {InputForm}></Route>
        <Route exact path = "/retirementcomaparisionform" component = {RetirementComaparisionForm}></Route>
      </Switch>
      </div>
    </BrowserRouter>
    
    
  );
}

export default App;

Navigation.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import DisplayTable from './DisplayTable';
import {NavLink} from 'react-router-dom';
import {Navbar, Nav} from 'react-bootstrap';

class Navigation extends React.Component{
    render(){
        return(
            
    <Navbar bg="dark" expand="lg" variant = "dark">
        <Navbar.Brand>Retirement Calculator</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="mr-auto">
                <Nav.Link to = "/">Home</Nav.Link>
                <Nav.Link to = "/retirementcomaparisionform">Compare</Nav.Link>
        
            </Nav>
    
        </Navbar.Collapse>
    </Navbar>
            
            
        )
    }

}
export default Navigation;

Answer 1

这是工作示例：StackBlitz

import React from "react";
import ReactDOM from "react-dom";
import reportWebVitals from "./reportWebVitals";
import DisplayTable from "./DisplayTable";
import { NavLink, Link } from "react-router-dom";
import { Navbar, Nav } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import { BrowserRouter, Route, Switch } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Navigation />

        <Switch>
          <Route exact path="/" component={InputForm} />
          <Route
            path="/retirementcomaparisionform"
            component={RetirementComaparisionForm}
          />
        </Switch>
      </div>
    </BrowserRouter>
  );
}

export default App;

class Navigation extends React.Component {
  render() {
    return (
      <Navbar bg="dark" expand="lg" variant="dark">
        <Navbar.Brand>Retirement Calculator</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="mr-auto">
            <Nav.Link href="/">Home</Nav.Link>
            <Nav.Link href="/retirementcomaparisionform">Compare</Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
    );
  }
}

//dummy InputForm and RetirementComaparisionForm components

const InputForm = () => {
  return <h1>Input Form</h1>;
};

const RetirementComaparisionForm = () => {
  return <h1>Retirement Comaparision Form</h1>;
};

React NavLink 不渲染组件

React NavLink does not render the components

router

routes

hyperlink

reactjs