Question

我正在尝试为我的应用程序实现路由，并且所有组件都可以工作，但是一旦将<Router>放在app.js文件中，它将呈现空白屏幕，仅显示导航栏。关于可能导致这种情况的任何建议？

这是app.js文件

import React from "react";
import Home from "./components/Home";
import Navbar from "./components/Navbar/Navbar";
import ViewTicket from "./components/ViewTicket";
import "./App.css";
import { BrowserRouter as Router, Route} from 'react-router-dom';

function App() {
  return (
    <Router>
      <div>
        <Navbar />

        <Route exact path="/" component={Home} />
        <Route path="/view" component={ViewTicket} />

      </div>
    </Router>
  );
}

export default App;

Answer 1

检查docs basic usage 您忘记了Switch组件。

<Switch>
  <Route exact path="/">
    <Home />
  </Route>
  <Route path="/about">
    <About />
  </Route>
  <Route path="/dashboard">
    <Dashboard />
  </Route>
</Switch>;

React Router呈现空白屏幕

1 个答案: