在以下路径 React / next.js 上遇到错误

时间:2021-06-15 15:46:10

标签: reactjs next.js

有人可以帮助我在 next.js 中遇到这样的问题,这是我的代码 这是我在控制台中得到的错误

<块引用>

错误:导出在以下路径上遇到错误: /行政 /用户

在名为 admin/index.js 的文件夹中的页面

import Layout from "../../components/Layout";
import Admin from "../../components/auth/Admin";
import Link from "next/link";

    const AdminIndex = () => {
      return (
        <Layout>
          <Admin>
            <div className="container-fluid">
              <div className="row">
                <div className="col-md-12 pt-5 pb-5">
                  <h2>Admin Dashboard</h2>
                </div>
                <div className="col-md-4">
                  <ul class="list-group">
                    <li className="list-group-item">
                      <Link href="/admin/crud/project">
                        <a>Create Project</a>
                      </Link>
                    </li>
                  </ul>
                </div>
                <div className="col-md-8">right</div>
              </div>
            </div>
          </Admin>
        </Layout>
      );
    };
    
    export default AdminIndex;

在文件夹 pages/user/index.js

错误:导出在以下路径上遇到错误: /行政 /用户

import Layout from "../../components/Layout";
import Private from "../../components/auth/Private";
import Link from "next/link";

const UserIndex = () => {
  return (
    <Layout>
      <Private>
        <div className="container-fluid">
          <h2>User Dashboard</h2>
        </div>
      </Private>
    </Layout>
  );
};

export default UserIndex;

最后这是我的标题

import React, { useState } from "react";
import Link from "next/link";
import Router from "next/router";
import nProgress from "nprogress";
import { APP_NAME } from "../config";
import { signout, isAuth } from "../actions/auth";
import {
  Collapse,
  Navbar,
  NavbarToggler,
  Nav,
  NavItem,
  NavLink,
} from "reactstrap";

Router.onRouteChangeStart = (url) => nProgress.start();
Router.onRouteChangeComplete = (url) => nProgress.done();
Router.onRouteChangeError = (url) => nProgress.done();
//next.js giving us the option to use such option

const Header = () => {
  const [isOpen, setIsOpen] = useState(false);

  const toggle = () => {
    setIsOpen(!isOpen);
  };

  return (
    <div>
      <Navbar color="light" light expand="md">
        <Link href="/">
          <NavLink className="font-weight-bold">{APP_NAME}</NavLink>
        </Link>
        <NavbarToggler onClick={toggle} />
        <Collapse isOpen={isOpen} navbar>
          <Nav className="ml-auto" navbar>
            {!isAuth() && (
              <React.Fragment>
                <NavItem>
                  <Link href="/signin">
                    <NavLink>Signin</NavLink>
                  </Link>
                </NavItem>
                <NavItem>
                  <Link href="/signup">
                    <NavLink>Signup</NavLink>
                  </Link>
                </NavItem>
              </React.Fragment>
            )}
            {isAuth() && isAuth().role === 0 && (
              <NavItem>
                <Link href="/user">
                  <NavLink style={{ cursor: "pointer" }}>
                    {`${isAuth().name}'s Dashboard`}
                  </NavLink>
                </Link>
              </NavItem>
            )}
            {isAuth() && isAuth().role === 1 && (
              <NavItem>
                <Link href="/admin">
                  <NavLink style={{ cursor: "pointer" }}>{`${
                    isAuth().name
                  }'s Dashboard`}</NavLink>
                </Link>
              </NavItem>
            )}
            {isAuth() && (
              <NavItem>
                <NavLink
                  style={{ cursor: "pointer" }}
                  onClick={() => signout(() => Router.replace(`/signin`))}
                >
                  Signout
                </NavLink>
              </NavItem>
            )}
          </Nav>
        </Collapse>
      </Navbar>
    </div>
  );
};

export default Header;

0 个答案:

没有答案