Javascript 不变冲突：不应使用<；开关>；a<；路由器>；_Javascript_Reactjs_React Router

Javascript 不变冲突：不应使用<；开关>；a<；路由器>；

javascript reactjs

Javascript 不变冲突：不应使用<；开关>；a<；路由器>；,javascript,reactjs,react-router,Javascript,Reactjs,React Router,我有一个我不知道如何解决的问题，我在运行npm测试时遇到了这个错误不变冲突：不应在外部使用问题可能是什么？我如何解决？我运行的测试是react附带的标准app.test.js class App extends Component { render() { return ( <div className = 'app'> <nav> <ul> <li><L

我有一个我不知道如何解决的问题，我在运行npm测试时遇到了这个错误

不变冲突：不应在

外部使用

问题可能是什么？我如何解决？我运行的测试是react附带的标准app.test.js

class App extends Component {
  render() {
    return (
      <div className = 'app'>
        <nav>
          <ul>
            <li><Link exact activeClassName="current" to='/'>Home</Link></li>
            <li><Link exact activeClassName="current" to='/TicTacToe'>TicTacToe</Link></li>
            <li><Link exact activeClassName="current" to='/NumGame'>Quick Maths</Link></li>
            <li><Link exact activeClassName="current" to='/HighScore'>Highscore</Link></li>
            <li><Link exact activeClassName="current" to='/Profile'>Profile</Link></li>
            <li><Link exact activeClassName="current" to='/Login'>Sign out</Link></li>
          </ul>
        </nav>
        <Switch>
          <Route exact path='/' component={Home}></Route>
          <Route path='/TicTacToe' component={TicTacToe}></Route>
          <Route path='/NumGame' component={NumberGame}></Route>
          <Route path='/HighScore' component={HighScore}></Route>
          <Route path='/Profile' component={Profile}></Route>
          <Route path='/Login' component={SignOut1}></Route>
        </Switch>
      </div>
    );
  }
};

类应用程序扩展组件{
render（）{
返回(

家
提克塔克托
快速数学
高分
侧面图
注销

);
}
};

错误是正确的。您需要使用

BrowserRouter

或其他类似

HashRouter

、

MemoryRouter

的选项来包装

开关。这是因为BrowserRouter
和替代品是所有路由器组件的通用底层接口，它们利用HTML5history
API，您需要它在路由之间来回导航
试着这样做，而不是
import { BrowserRouter, Switch, Route } from 'react-router-dom';

然后像这样把所有东西都包起来
<BrowserRouter>
 <Switch>
  //your routes here
 </Switch>
</BrowserRouter>

import {BrowserRouter, Switch, Router} from 'react-router-dom
 
 class App extends Component {
  render() {
    return (
      <div className = 'app'>
        <nav>
          <ul>
            <li><Link exact activeClassName="current" to='/'>Home</Link></li>
            <li><Link exact activeClassName="current" to='/TicTacToe'>TicTacToe</Link></li>
            <li><Link exact activeClassName="current" to='/NumGame'>Quick Maths</Link></li>
            <li><Link exact activeClassName="current" to='/HighScore'>Highscore</Link></li>
            <li><Link exact activeClassName="current" to='/Profile'>Profile</Link></li>
            <li><Link exact activeClassName="current" to='/Login'>Sign out</Link></li>
          </ul>
        </nav>

     <BrowserRouter>
        <Switch>
          <Route exact path='/' component={Home}></Route>
          <Route path='/TicTacToe' component={TicTacToe}></Route>
          <Route path='/NumGame' component={NumberGame}></Route>
          <Route path='/HighScore' component={HighScore}></Route>
          <Route path='/Profile' component={Profile}></Route>
          <Route path='/Login' component={SignOut1}></Route>
        </Switch>
      <BrowserRouter/>
      </div>
    );
  }
};


//你的路线在这里
始终将BrowserRouter放在导航门组件中，请遵循以下示例：
import React, { Component } from 'react'
import { render } from 'react-dom'
import { BrowserRouter, Route, NavLink, Switch } from 'react-router-dom'

var Componente1 = () => (<div>Componente 1</div>)
var Componente2 = () => (<div>Componente 2</div>)
var Componente3 = () =>  (<div>Componente 3</div>)

class Rotas extends Component {
    render() {

        return (
                <Switch>
                    <Route exact path='/' component={Componente1}></Route>
                    <Route exact path='/comp2' component={Componente2}></Route>
                    <Route exact path='/comp3' component={Componente3}></Route>
                </Switch>
        )
    }
}


class Navegacao extends Component {
    render() {
        return (

                <ul>
                    <li>
                        <NavLink to="/">Comp1</NavLink>
                    </li>
                    <li>
                        <NavLink exact  to="/comp2">Comp2</NavLink>
                    </li>
                    <li>
                        <NavLink exact to="/comp3">Comp3</NavLink>
                    </li>
                </ul>
        )
    }
}

class App extends Component {
    render() {
        return (
            <BrowserRouter>
                <div>
                    <Navegacao />
                    <Rotas />
                </div>
            </BrowserRouter>
        )
    }
}

render(<App/>, document.getElementById("root"))

import React，{Component}来自“React”
从'react dom'导入{render}
从“react router dom”导入{BrowserRouter，Route，NavLink，Switch}
变量Componente1=（）=>（Componente1）
变量Componente2=（）=>（Componente2）
变量组件3=（）=>（组件3）
类Rotas扩展组件{
render（）{
返回(
)
}
}
类Navegacao扩展组件{
render（）{
返回(


Comp1


Comp2


化合物3


)
}
}
类应用程序扩展组件{
render（）{
返回(
)
}
}
render（，document.getElementById（“根”））

注意：BrowserRouter只接受一个子元素。我也面临同样的问题。当我“从react router dom导入BrowserRouter”时，问题就解决了
并编写代码
<BrowserRouter>
 <Switch>
  //your routes here
 </Switch>
</BrowserRouter>


//你的路线在这里
根据React路由器开发者的说法，正确的处理方法是将单元测试封装在路由器中。建议使用MemoryRouter
，以便能够在测试之间重置路由器
您仍然可以执行以下操作：
<BrowserRouter>
  <App />
</BrowserRouter>

App
的单元测试通常类似于：
const content = render(<App />); // Fails Unit test

const content=render（）；//单元测试失败

将单元测试更新为：
const content = render(<MemoryRouter><App /></MemoryRouter>); // Passes Unit test

const content=render（）；//通过单元测试
您不能将react router 4.3与react router dom 4.4一起使用，反之亦然。（编辑：这样写出来：为什么不认为这是一个突破性的变化？）
确保具有相同的版本
确保在所有嵌套组件中具有正确的导入。如果其中一个从react路由器而不是react路由器dom导入交换机，则可能会出现该错误。保持所有内容与“react router dom”（即重新导出react router组件）一致。核对：
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",

您应该这样编写代码
<BrowserRouter>
 <Switch>
  //your routes here
 </Switch>
</BrowserRouter>

import {BrowserRouter, Switch, Router} from 'react-router-dom
 
 class App extends Component {
  render() {
    return (
      <div className = 'app'>
        <nav>
          <ul>
            <li><Link exact activeClassName="current" to='/'>Home</Link></li>
            <li><Link exact activeClassName="current" to='/TicTacToe'>TicTacToe</Link></li>
            <li><Link exact activeClassName="current" to='/NumGame'>Quick Maths</Link></li>
            <li><Link exact activeClassName="current" to='/HighScore'>Highscore</Link></li>
            <li><Link exact activeClassName="current" to='/Profile'>Profile</Link></li>
            <li><Link exact activeClassName="current" to='/Login'>Sign out</Link></li>
          </ul>
        </nav>

     <BrowserRouter>
        <Switch>
          <Route exact path='/' component={Home}></Route>
          <Route path='/TicTacToe' component={TicTacToe}></Route>
          <Route path='/NumGame' component={NumberGame}></Route>
          <Route path='/HighScore' component={HighScore}></Route>
          <Route path='/Profile' component={Profile}></Route>
          <Route path='/Login' component={SignOut1}></Route>
        </Switch>
      <BrowserRouter/>
      </div>
    );
  }
};

从“react Router dom”导入{BrowserRouter，Switch，Router}
类应用程序扩展组件{
render（）{
返回(

家
提克塔克托
快速数学
高分
侧面图
注销

);
}
};
我的做法是使用纱线添加反应路由器dom
或npm安装反应路由器dom
更新依赖项，并删除node_modules文件夹，然后再次运行纱线
或npm安装
。
错误：不变量失败：您不应该在[enter image description here][1]之外使用、
Error: Invariant failed: You should not use <Link>,<Switch>,<Route> outside a <Router>[enter image description here][1]

[Error: Invariant failed: You should not use <Link>,<Switch>,<Route> outside a <Router> ][1]

 1. Open Index.js or Index.jsx
 2. add-> import { BrowserRouter } from "react-router-dom";
 3.Rap <App /> in <BrowserRouter> and </BrowserRouter> 
should  look like :
ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById("root")
);

[错误：不变量失败：不应在a][1]之外使用、]
1.打开Index.js或Index.jsx
2.添加->从“react router dom”导入{BrowserRouter}；
3.说唱
应该是这样的：
ReactDOM.render(
,
document.getElementById（“根”）
);
我找到了解决此问题的解决方案
下面是示例代码
import React from 'react';
import Home from './HomeComponent/Home';
import { Switch, Route } from 'react-router';
import { BrowserRouter } from "react-router-dom";
class App extends React.Component{
render(){
return(
         <BrowserRouter>
           <Switch>
            <Route path="/" render={props => (
                <Home {...props}/>
            )}/>
          </Switch>
        </BrowserRouter>
    )
  }
}
export default App;

从“React”导入React；
从“./HomeComponent/Home”导入主页；
从“反应路由器”导入{交换机，路由}；
从“react router dom”导入{BrowserRouter}；
类应用程序扩展了React.Component{
render（）{
返回(
(
)}/>
)
}
}
导出默认应用程序；
我的导航链接和路由在不同的文件中，为了阻止此错误，我必须将它们都包装在BrowserRouter中：
import React from 'react';
import { NavLink, BrowserRouter } from 'react-router-dom'
const MainNav = () => (
  <BrowserRouter>
      <nav>
      <ul>
        <li>
          <NavLink exact activeClassName='current' to='/'>Home</NavLink>
        </li>
        <li>
          <NavLink exact activeClassName='current' to='/users'>Users</NavLink>
        </li>
      </ul>
    </nav>
  </BrowserRouter>
);


export default MainNav;

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Home from '../views/HomeView';
import UsersView from '../views/UsersView';
import { BrowserRouter } from 'react-router-dom';

const MainRoutes = () => (
  <BrowserRouter>
    <Switch>
      <Route exact path='/' component={Home}></Route>
      <Route exact path='/users' component={UsersView}></Route>
    </Switch>
  </BrowserRouter>
);

export default MainRoutes;`

从“React”导入React；
从“react router dom”导入{NavLink，BrowserRouter}
常量MainNav=（）=>(


家


使用者


);
导出默认主导航；
从“React”导入React；
从“react router dom”导入{Switch，Route}；
从“../views/HomeView”导入主视图；
从“../views/UsersView”导入UsersView；
从“react router dom”导入{BrowserRouter}；
常量主路线=（）=>(
);
出口默认干线`
请注意，此错误与t无关