Question

我正在使用Web应用程序，并且我的应用程序大部分都能工作，除了我看不到/ tasks部分。我不明白，因为它与其余元素相同。

import React, {
  Component,
  Fragment
} from 'react';
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom';

import AppProvider, {
  Consumer
} from './AppProvider';
import Login from './Login';
import Signup from './Signup';

import Navbar from './Navbar';
import FlashMessage from './FlashMessage';

class App extends Component {
  render() {
    return (
      <AppProvider>
        <Router>
          <Fragment>
            <Navbar />
            <FlashMessage />
            <Route exact path="/" component={() =>
              <h1 className="content">Welcome, Home!</h1>} />
            <Route exact path="/login" component={() => <Login />} />
            <Route exact path="/signup" component={() => <Signup />} />
            <Router exact path="/tasks" component={() =>
              <h1 className="content">Content Should Go Here</h1>} />
            <Route exact path="/signedOut" component={() =>
              <h1 className="content">You're now signed out.</h1>} />
            <Route exact path="/accountCreated" component={() =>
              <h1 className="content">Account created. <Link
to="/login">
              Proceed to Dashboard</Link></h1>} />
          </Fragment>
        </Router>
      </AppProvider>
    );
  }
}

export default App;

在/ tasks路由的内容div将不显示任何内容。没有错误，我已经在控制台中检查了。我只想要在/ tasks上显示内容。

Answer 1

我认为问题在于您在“ ./tasks”中使用BrowserRouter而不是使用route。

Answer 2

问题是因为链接上有一个斜杠。

React拒绝渲染div

2 个答案: