错误：不变量失败：您不应该在 <Router> 之外使用 <Link> 有人吗？

Question

我在 React 和 Next Js 应用程序中使用 react-router-dom 进行路由。依赖项列表如下所示：

目前，我的 package.json 看起来像这样

{
"name": "MUSIC",
"version": "0.1.0",
"private": true,
"scripts": {
 "dev": "next dev",
 "build": "next build",
 "start": "next start"
},
"dependencies": {
 "next": "10.2.3",
 "react": "17.0.2",
 "react-dom": "17.0.2",
 "react-icons": "^4.2.0",
 "react-router-dom": "^5.2.0",
 "styled-components": "^5.3.0",
 "yarn": "^1.22.10"
}
}

不断抛出此错误。

服务器错误 错误：不变量失败：您不应该在

之外使用

生成页面时发生此错误。任何控制台日志都将显示在终端窗口中。 调用堆栈 不变的 file:///Users/mahijendra/Downloads/new%20mac%20backup/code/portfolio/node_modules/tiny-invariant/dist/tiny-invariant.cjs.js (13:11) 对象.children

我的组件文件music/components/Navbar.js

import { FaBars } from 'react-icons/fa';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import styled from 'styled-components';
import {Router} from "next/router";

export const Nav = styled.nav`
  background: #000;
  height: 80px;
  display: flex;
  justify-content: space-between;
  padding: 0.5rem calc((100vw - 1000px) / 2);
  z-index: 10;
  /* Third Nav */
  /* justify-content: flex-start; */
`;

export const NavLink = styled(Link)`
  color: #fff;
  display: flex;
  align-items: center;
  text-decoration: none;
  padding: 0 1rem;
  height: 100%;
  cursor: pointer;
  &.active {
    color: #15cdfc;
  }
`;

export const Bars = styled(FaBars)`
  display: none;
  color: #fff;
  @media screen and (max-width: 768px) {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(-100%, 75%);
    font-size: 1.8rem;
    cursor: pointer;
  }
`;

export const NavMenu = styled.div`
  display: flex;
  align-items: center;
  margin-right: -24px;
  /* Second Nav */
  /* margin-right: 24px; */
  /* Third Nav */
  /* width: 100vw;
  white-space: nowrap; */
  @media screen and (max-width: 768px) {
    display: none;
  }
`;

export const NavBtn = styled.nav`
  display: flex;
  align-items: center;
  margin-right: 24px;
  /* Third Nav */
  /* justify-content: flex-end;
  width: 100vw; */
  @media screen and (max-width: 768px) {
    display: none;
  }
`;

export const NavBtnLink = styled(Link)`
  border-radius: 4px;
  background: #256ce1;
  padding: 10px 22px;
  color: #fff;
  outline: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  text-decoration: none;
  /* Second Nav */
  margin-left: 24px;
  &:hover {
    transition: all 0.2s ease-in-out;
    background: #fff;
    color: #010606;
  }
`;

function Navbar(props) {
    return (
            <>
                <Nav>
                    <NavLink to='/'>
                        <img alt='logo' />
                    </NavLink>
                    <Bars />
                    <NavMenu>
                        <NavLink to='/about' activeStyle>
                            About
                        </NavLink>
                        <NavLink to='/services' activeStyle>
                            Services
                        </NavLink>
                        <NavLink to='/contact-us' activeStyle>
                            Contact Us
                        </NavLink>
                        <NavLink to='/sign-up' activeStyle>
                            Sign Up
                        </NavLink>
                        {/* Second Nav */}
                        {/* <NavBtnLink to='/sign-in'>Sign In</NavBtnLink> */}
                    </NavMenu>
                    <NavBtn>
                        <NavBtnLink to='/signin'>Sign In</NavBtnLink>
                    </NavBtn>
                </Nav>
            </>
    );
}

export default Navbar;

我的 index.js 文件 music/pages/index.js

import Head from 'next/head'
import styles from '../styles/Home.module.css'
import Navbar from "../components/Navbar";

export default function Home() {
  return (
    <div>
      <Navbar />
    </div>
  )
}

我为此头疼

Answer 1

您没有开关，也没有查看您发布的内容的路线。

在您的 app.js 中，您需要指定很多东西才能让反应路由器工作。

在导入部分，您将像这样导入组件。

import About from "./about" // or wherever its located
import { Route, Switch } from 'react-router';
import { BrowserRouter as Router } from 'react-router-dom'

然后在返回后设置你的路由器。

<Router>
  <div>
    <Navbar/>
    <Switch>
      <Route exact path="/about" component={About}/> // you need one of these for each page you have 
    </Switch>
  </div>
</Router>