불변성 실패:외부에서는 사용 하지 마십시오.
용 i i i i를 쓴다.react-router-dom
을 중입니다.React
★★★. 했습니다.내 앱의 일부가 다른 패키지로 추출되었습니다.의존관계 목록은 다음과 같습니다.
./app/syslog/syslog.json
{
"dependencies": {
"@app/components": "^1.0.0",
"react": "^16.8.5",
"react-dom": "^16.8.5",
"react-router-dom": "^5.0.0"
}
}
./애플리케이션/컴포넌트/프로세서.json
{
"peerDependencies": {
"react-router-dom": "^5.0.0"
}
}
@app/components
가 필요합니다.react-router-dom
하다
Uncaught Error: Invariant failed: You should not use <Route> outside a <Router>
The above error occurred in the <Context.Consumer> component:
Uncaught (in promise) Error: Invariant failed: You should not use <Route> outside a <Router>
이러러 는생? ??? 생?? »App.js
용 i i i i를 쓴다.BrowserRouter
import React, { Suspense } from 'react';
import { Switch, Route } from 'react-router-dom';
import { Placeholder } from '@app/components';
const Auth = React.lazy(() => import(/* webpackPrefetch: true */ './pages/Auth'));
const Index = React.lazy(() => import(/* webpackPrefetch: true */ './pages/Index'));
const App = () => (
<Suspense fallback={<Placeholder />}>
<Switch>
<Route path="/auth" component={Auth} />
<Route path="/" component={Index} />
</Switch>
</Suspense>
);
export default App;
client.syslogx
import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root'),
);
이 문제는 다음과 같이 변경하여 해결했습니다.
import {Route, Switch} from "react-router";
로.
import {Route, Switch} from "react-router-dom";
-dom을 추가합니다.
테스트 중에 이 문제가 발생하여 테스트 컴포넌트를 라우터로 포장하여 해결했습니다.
import React from 'react';
import ReactDom from 'react-dom';
import Header from '../components/Header/Header';
import { BrowserRouter } from 'react-router-dom';
it('renders Header without crashing', () => {
const div = document.createElement('div');
ReactDom.render(
<BrowserRouter>
<Header />
</BrowserRouter>,
div);
ReactDom.unmountComponentAtNode(div);
});
농담, 효소:불변 위반:또는 (Jest를 사용하여) 라우터를 포함하는 컴포넌트를 테스트하려면 컴포넌트 Import {BrowserRouter as Universant Violation}이 아닌 테스트에서 라우터를 Import해야 합니다.Router()를 외부에서 사용하거나 Router()와 함께 사용하지 마십시오.Router 4 docs에 따르면 컴포넌트는 유효한 것으로 간주됩니다.여기서 컴포넌트를 작성한 후 다른 컴포넌트로 Import하여 내부에 배치할 수 있습니다.
2가지 반응 인스턴스의 문제
는 그 하는 것만으로 했습니다.BrowserRouter
부에서react-router-dom
in 에index.js
그리고 추가:추가:
<BrowserRouter>
<App>
</BrowserRouter>
범위:
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root'));
Router 태그에는 Route 태그, Link 태그를 포함해야 합니다.
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
const Home = () => {
return (
<div>
<p>Home</p>
</div>
);
};
const About = () => {
return (
<div>
<p>About</p>
</div>
);
};
const Contact = () => {
return (
<div>
<p>Contact</p>
</div>
);
};
class App extends Component {
render() {
return (
<Router>
<div>
<h1>W3Adda - Simple SPA</h1>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Users</Link>
</li>
</ul>
</nav>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</div>
</Router>
);
}
}
export default App;
나는 이 프로젝트에 연결된 구성 요소를 테스트하는 동안 이 항목을 테스트 중에 있습니다. 스 에 습 니 했 보 다 수 i got입 프 정 를 ( my이 this which duringnpm link
and 그래서 때 그래서react-router-dom
다음 솔루션에서 다음 솔루션은 다음과 같이 로드됩니다.여러 번 로딩되었습니다.내 경우는, 다음의 솔루션이 유효합니다.
webpack.config.js
붙였습습니니다
resolve: {
alias: {
'react-router-dom': path.resolve('./node_modules/react-router-dom')
}
}
붙여진 export를 합니다.Router
마찬가지로react-router-dom
스위치/루트 컴포넌트에 랩합니다.
const App = () => (
<Router>
<Suspense fallback={<Placeholder />}>
<Switch>
<Route path="/auth" component={Auth} />
<Route path="/" component={Index} />
</Switch>
</Suspense>
</Router>
);
Redirect 컴포넌트에서도 같은 문제가 발생하였습니다.알고 보니 리다이렉트를 'react-router-dom'이 아닌 'react-router'에서 불렀습니다.
Error: Invariant failed: You should not use <Redirect> outside a <Router>
CRA로 작성한 메인 앱과 컴포넌트 라이브러리도 비슷한 상황이었습니다. 예가 .react-router-dom
독립해서 일해요.의 컴포넌트는 「」를 사용합니다.<Link>
에는 「」가 있습니다.<Router>
.
@Pavel answer에서 영감을 얻어 에일리어스를 추가하면 문제를 해결할 수 있다는 것을 알게 되었습니다.팩을 사용하고 있는 는, 할 수 .react-router-dom
노드모듈해결순서보다 priority가 수 있습니다.
에일리어스js
const fs = require('fs');
const path = require('path');
const directory = fs.realpathSync(process.cwd());
const resolveApp = (relativePath) => path.resolve(directory, relativePath);
module.exports = {
react: resolveApp('node_modules/react'),
'react-router-dom': resolveApp('node_modules/react-router-dom'),
};
기본 CRA 설정을 덮어쓰기 위해 config-override.js에 의해 사용됩니다.
const { addWebpackAlias, override, removeModuleScopePlugin } = require('customize-cra');
const aliases = require('./aliases');
module.exports = override(removeModuleScopePlugin(), addWebpackAlias(aliases));
또는 webpack.config.js(CRA가 아닌 경우):
resolve: {
alias: {
"react-router-dom": path.resolve(appFolder, "node_modules", "react-router-dom"),
}
}
시 하여 Create React App을 했습니다.<Router></Router
에 inside inside inside App.js
대대가 instead로Index.js
늘 그래왔듯이
이전:
Index.js
ReactDOM.render(
<React.StrictMode>
<GlobalStyle />
<Router>
<App />
</Router>
</React.StrictMode>,
document.getElementById('root')
);
App.js
return (
<div className="App">
<Header />
<Route path="/blabla" component={Whatever}
</div>
)
그 후:
Index.js:
ReactDOM.render(
<React.StrictMode>
<GlobalStyle />
<App />
</React.StrictMode>,
document.getElementById('root')
);
App.js:
return (
<div className="App">
<Router>
<Header />
<Route path="/blabla" component={Whatever}
</Router>
</div>
)
MyComponent에서 'react-router-dom'의 종속성을 삭제하여 이 수수께끼 같은 오류를 해결했습니다.node_modules/react-router-dom'과 'package'에서 삭제했습니다.json' My App의 구성은 다음과 같습니다.
AppFolder
├── README.md
├── build
├── node_modules
│ ├── react-router-dom
├── package-lock.json
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
├── App.css
├── App.js
├── App.test.js
├── index.js
├── redux
│ ├── reducers.js
│ └── store.js
└── serviceWorker.js
MyComponent
├── README.md
├── dist
├── node_modules
│ ├── react-router-dom
├── package-lock.json
├── package.json
├── rollup.config.js
└── src
├── index.js
├── styles.css
└── test.js
App.js의 소스 코드입니다.
import MyComponent from 'MyComponent'
export default App(){
return (
<div className="App">
<HashRouter>
<div>
<header className="App-header">
</header>
<Route path="/home" component={MyComponent}/>
</div>
</HashRouter>
</div>)
}
MyComponent에 대한 내보내기입니다.
export default withRouter(MyComponent);
컴포넌트 폴더에 'react-router-dom'이 남아 있으면 오류가 나타납니다.
이 에러는, 부모 컴포넌트를 라우터내에 랩 하는 것으로 해결합니다.
오류 해결 전
<Header />
<div className="col-md-12 pd-0-0">
<div className="row">
<Sidebar />
<div className="col-sm-10 col-md-10 pd-0-0" style={style}>
<Router>
<Switch>
<Route path="/dashboard/check-in" component={CheckIn} />
<Route path="/dashboard/deals" component={Deals} />
<Route path="/dashboard/events" component={Events} />
<Route path="/dashboard/invoice" component={Invoice} />
<Route path="/dashboard/notification" component={Notification} />
<Route path="/dashboard/profile" component={Profile} />
<Route path="/dashboard/redemption" component={Redemptions} />
<Route path="/dashboard/restriction-management" component={RestrictionManagement} />
</Switch>
</Router>
</div>
</div>
</div>
에러 해결 후
<Router>
<Header />
<div className="col-md-12 pd-0-0">
<div className="row">
<Sidebar />
<div className="col-sm-10 col-md-10 pd-0-0" style={style}>
<Switch>
<Route path="/dashboard/check-in" component={CheckIn} />
<Route path="/dashboard/deals" component={Deals} />
<Route path="/dashboard/events" component={Events} />
<Route path="/dashboard/invoice" component={Invoice} />
<Route path="/dashboard/notification" component={Notification} />
<Route path="/dashboard/profile" component={Profile} />
<Route path="/dashboard/redemption" component={Redemptions} />
<Route path="/dashboard/restriction-management" component={RestrictionManagement} />
</Switch>
</div>
</div>
</div>
</Router>
루팅을 하고 있는 .이러한 컴포넌트 는 안 .Router
는 단일 컴포넌트 .그 컴포넌트는 다음 컴포넌트에 의해 작성된 단일 컴포넌트 또는 단일 컴포넌트만Route
아래Router
그 컴포넌트에 포함되어 있습니다.
잘못된 코드(단, 실행되지만 버그가 생성됩니다) -
function App() {
return (
<div className="App">
<Header/>
<Router>
<Switch>
<Route path="/" exact>
<Home />
</Route>
</Switch>
</Router>
</div>
);
}
만 지웁니다.<Header/>
, , it solved the issue., 그것은 문제를 해결했다.
코드 쓰기 -
function App() {
return (
<div className="App">
<Router>
<Switch>
<Route path="/" exact>
<Home />
</Route>
</Switch>
</Router>
</div>
);
}
그냥 'beak-dom'으로 'beak-dom'을 바꿔서.
import {Route} from "react-router";
로.
import {Route} from "react-router-dom";
GatsbyJS를 사용하고 있는데 이 에러가 발생하는 경우는, 변경해 주세요.
import { Link } from "react-router-dom";
로.
import { Link } from 'gatsby';
이 에러는 react-router와 react-router-dom의 사용방법(with Router, Memory Router)이 혼재되어 발생한 것입니다.react-router-dom의 것만을 사용함으로써 불변의 오차가 사라졌습니다.이게 도움이 됐으면 좋겠네요.
용 방 using<Link>
가져온 구성 요소에는 이 오류를 주지 않는 구성 요소에는 져 포 는 포 할 이 생 다 tag 니 습 그 could the' 있 error, importedt the있으 haveBrowserRouter
부에서'react-router-dom'
import {BrowserRouter , Link} from 'react-router-dom';
링크된 태그를 태그로 감아주세요.
라우터는 컴포넌트 외부에서 사용합니다.라우터 내의 모든 구성요소를 랩하면 구성요소에서 링크를 사용할 수 있습니다.
{ BrowserRouter를 'react-router-dom'에서 라우터, 루트, 스위치로 Import합니다.
<Router>
<Appbar />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/mac" exact component={Mac} />
</Switch>
<Footer />
</Router>
I managed to solve the problem by removing 나는 그 문제를 제거함으로써<BrowserRouter>
부에서router.js
and including it in 그리고 그것을 에 포함시킨다.app.js
export default function Routes() {
return (
<Switch>
<Route path="/" exact component={Home} />
<Route path="/book" component={Book} />
<Route path="/client" component={Client} />
<Route path="/rent" component={Rent} />
<Route path="/dash" component={Dash} />
</Switch>
);
}
function App() {
return (
<div>
<BrowserRouter>
<Header></Header>
<Routes/>
</BrowserRouter>
</div>
);
}
이 문제는 수입으로 해결했습니다.
import {BrowserRouter as Router, Route} from 'react-router-dom';
and wrapped all the 다 싸서Route
「 」Router
표시
<Router>
<Route exact path='/' component={HomePage} />
</Router>
Solidus 앱에서 Rails 뷰를 교체하려고 할 때도 비슷한 문제가 있었습니다.
해결책은 방금 추가한 리액트 라우터를 사용하도록 vies를 편집하는 것이었습니다만, 아직 완전히 구성되지 않은 것 같습니다.
예를 들면 제가 편집해서views/spree/home/index.html
송신원:
<%= javascript_pack_tag 'application' %>
<%= react_component("Home/Index") %>
대상:
<%= javascript_pack_tag 'application' %>
<%= react_component("Routes") %>
더 참고하기 위해, 여기 제javascript/components/Route.js
:
import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Home from "./Home/Index";
import Product from "./Products/Show";
class Routes extends React.Component {
render() {
return (
<Router>
<Route exact path="/" component={Home} />
<Route path="/products/:slug" component={Product} />
</Router>
);
};
};
export default Routes;
앱 컴포넌트를 라우터로 래핑할 때도 같은 문제가 발생하였습니다.
오류:
import React, { Suspense } from 'react';
import { BrowserRouter, Switch, Route, withRouter } from 'react-router-dom';
import { Placeholder } from '@app/components';
const Auth = React.lazy(() => import(/* webpackPrefetch: true */ './pages/Auth'));
const Index = React.lazy(() => import(/* webpackPrefetch: true */ './pages/Index'));
const App = () => (
<BrowserRouter>
<Suspense fallback={<Placeholder />}>
<Switch>
<Route path="/auth" component={Auth} />
<Route path="/" component={Index} />
</Switch>
</Suspense>
</BrowserRouter>
);
export default withRouter(App);
솔루션:
이미 Switch 컴포넌트를 사용하고 있으며, 그 후 Router에서 삭제했습니다.
import React, { Suspense } from 'react';
import {BrowserRouter, Switch, Route } from 'react-router-dom';
import { Placeholder } from '@app/components';
const Auth = React.lazy(() => import(/* webpackPrefetch: true */ './pages/Auth'));
const Index = React.lazy(() => import(/* webpackPrefetch: true */ './pages/Index'));
const App = () => (
<BrowserRouter>
<Suspense fallback={<Placeholder />}>
<Switch>
<Route path="/auth" component={Auth} />
<Route path="/" component={Index} />
</Switch>
</Suspense>
</BrowserRouter>
);
export default App;
유닛 테스트 중에 이 문제를 겪고 있는 분들을 위해 다음과 같은 작업을 수행했습니다.
function mountComponentWithRouter(Component, props) {
const Teste = withRouter(prop => <Component {...prop} {...props} />);
return mount(
<HashRouter>
<Teste />
</HashRouter>,
{
context: { router },
childContextTypes: { router: PropTypes.object.isRequired }
}
);
}
내부 반응-라우터-돔 구성 요소Component
에는 애플리케이션을 실행할 때 일반적으로 자연스럽게 전달되는 모든 소품(패스명, 해시, 상태, 검색)이 포함됩니다.
가장 간단한 답은 Navbar용 reactstrap 공식 문서 안에 있습니다.이 웹사이트 https://reactstrap.github.io/components/navbar/를 참조하십시오.
그들은 우리가 이 수입품을 사용해야 한다고 안내했다.
import {NavLink} from 'reactstrap';
렌더링 콜의 마지막에 쉼표가 붙어 있습니다.document.getElementById('root')
.
render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root'),
);
언급URL : https://stackoverflow.com/questions/55552147/invariant-failed-you-should-not-use-route-outside-a-router
'programing' 카테고리의 다른 글
AngularJs $watch on $location.reloadOnSearch가 false인 경우 검색이 작동하지 않음 (0) | 2023.04.02 |
---|---|
UI 그리드 상수를 사용하여 스크롤 막대 사용 안 함 (0) | 2023.04.02 |
Woocommerce: 순서대로 총 항목 수 가져오기 (0) | 2023.04.02 |
Angular4 - 폼 제어를 위한 값 접근기 없음 (0) | 2023.04.02 |
WooCommerce 미니카트를 WordPress 사이트에 표시할 수 있는 방법이 있습니까? (0) | 2023.04.02 |