javascript - 为什么 React.Component 没有显示在特定路由上？

Question

我有 2 个应用页面，必须在特定路线上显示:/dashboard 和 /settings。

当我登录应用程序时(只需在示例中按登录)，我可以看到显示/dashboard 组件和导航，但是当我使用链接 /dashboard 或按导航按钮时 -组件未显示。

当导航 + 路由器只有一个组件时，没有这样的麻烦，但是当我决定将它们分开，并且仅在登录后进行导航时 - 一切都改变了。

这里是溢出的 Nav 和 Router 组件的代码。

export class AppContainer extends React.Component {
  render() {
    return (
      <Router history={history}>
        <Nav />
        <Switch>
          <Route exact path="/dashboard" component={Dashboard} />
          <Route exact path="/settings" component={Settings} />
          <Route exact path="/" component={Dashboard} />
        </Switch>
      </Router>
    );
  }
}

Full Example can be found here.

Answer 1

看起来你失踪了<Switch>和<Router>在AppContainer的index.js中。 我可以通过在此处添加它们来使您的示例正常工作:

export class AppContainer extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <Nav />
          <Switch>
            <Route exact path="/dashboard" component={Dashboard} />
            <Route exact path="/settings" component={Settings} />
            <Route exact path="/" component={Dashboard} />
          </Switch>
        </div>
      </Router>
    );
  }
}

确保从“react-router-dom”导入交换机和路由器

编辑 此处的工作副本:https://7zryx.csb.app/

将登录添加到仪表板，以避免仅在路径精确为“/”而不是“/dashboard”时呈现 AppContainer。

App.js

import React from "react";
import { AppContainer } from "./components/app-container";

export default class App extends React.Component {
  render() {
    return (
      <AppContainer />
    );
  }
}

导航-index.js

   import React from "react";
    import { Link } from "react-router-dom";
    import { history } from "../../helpers";

    export class Nav extends React.Component {
      logout() {
        localStorage.removeItem("user");
        history.push("/");
      }

      render() {

// creating a function or state that checks if user is logged in
// if userLoggedIn() === true{

        return (
          <nav className="menu">
            <Link to={"/dashboard"}>Dashboard</Link>
            <Link to={"/settings"}>Settings</Link>
            <Link to={"/login"}>Login</Link>
            <button onClick={() => this.logout()}>Logout</button>
          </nav>
        );
      }
       return (
          <nav className="menu">
            <Link to={"/login"}>Login</Link>
          </nav>
        );
      }
    }

AppComponent-index.js

import React from "react";
import { Router, Route, Switch } from "react-router-dom";
import { history } from "../../helpers";
import { Nav } from "../../components/navigation";
import { Dashboard } from "../../pages/dashboard/";
import { Settings } from "../../pages/settings/";
import { Login } from "../../pages/login/";

export class AppContainer extends React.Component {
  render() {
    return (
      <Router history={history}>
        <Nav />
        <Switch>
          <Route exact path="/" component={Dashboard} />
          <Route exact path="/settings" component={Settings} />
          <Route exact path="/dashboard" component={Dashboard} />
          <Route exact path="/login" component={Login} />
        </Switch>
      </Router>
    );
  }
}

我在您的导航中添加了“登录”，并构建了导航以隐藏网站的所有其他部分，直到成功登录为止。您需要创建一个函数或设置一个状态来跟踪用户登录，以便仅呈现所需的组件。