Question

单击导航栏时，我在我的react应用程序中使用Router组件显示不同的组件。但是，当我单击导航栏中的链接时，该地址显示了路径，但是当路径等于该值时我调用的组件现在显示在页面中。

这是我的App.js

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { Route, BrowserRouter as Router, Switch } from "react-router-dom";
import NavBar from "./Components/navBar";
import Header from "./Components/ddrHeader";
import Home from "./Components/home";
import Plan from "./Components/plan";
import Waiting from "./Components/waiting";
import "./App.css";

class App extends Component {
  render() {
    return (
      <Router>
        <React.Fragment>
          <NavBar />
          <Switch>
            <Route exact path="/" Component={Home} />
            <Route path="/ddr" Component={Header} />
            <Route path="/plan" Component={Plan} />
            <Route path="/waiting" Component={Waiting} />
          </Switch>
        </React.Fragment>
      </Router>
    );
  }
}

export default App;

这是我的index.js

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router } from "react-router-dom";
import * as serviceWorker from "./serviceWorker";
// import DDR from './Components/ddr';
import App from "./App";

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById("root")
);
serviceWorker.register();

这是我的导航栏：

import React, { Component } from "react";
import { Link, BrowserRouter as Router } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.css";

class NavBar extends Component {
  render() {
    return (
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
          <ul class="navbar-nav">
            <li class="nav-item active">
              <Link className="nav-link" to="/">
                Home<span class="sr-only">(current)</span>
              </Link>
            </li>
            <li class="nav-item">
              <Link className="nav-link" to="/ddr">
                DDR
              </Link>
            </li>
            <li class="nav-item">
              <Link className="nav-link" to="/plan">
                Plan
              </Link>
            </li>
            <li class="nav-item">
              <Link className="nav-link" to="/waiting">
                Waiting
              </Link>
            </li>
          </ul>
        </nav>
    );
  }
}

export default NavBar;

Answer 1

为react-router(component prop)。道具 Component 错误，应为 component

<Switch>
   // <Route exact path="/" Component={Home} /> // wrong
   <Route exact path="/" component={Home} /> //correct
</Switch>

<Route path =“” component = {} />没有显示react中的组件

1 个答案: