Блог

Главная - Вопросы по программированию - ReactJS — Я получаю ошибку»Сбой инварианта r — не использовать вне » — это происходит на одной странице, но не на других страницах

ReactJS — Я получаю ошибку»Сбой инварианта r — не использовать вне » — это происходит на одной странице, но не на других страницах

#reactjs #react-router

Вопрос:

В одном из моих модулей я использую этот код без каких-либо проблем:

 
import { Link } from "react-router-dom";

         <Link to="/HowItWorks">
             Continue
         </Link>

Но в другом модуле я использую аналогичный код, но получаю неизменное сообщение об ошибке

          import { Link } from "react-router-dom";         
         <Link to="/TheBook">Continue</Link>

Единственное различие заключается в том, что первый модуль находится в каталоге src/components, в то время как неисправный модуль находится в каталоге src.

В App.js (который также находится в каталоге src) код маршрутизатора включает в себя несколько модулей, включая оба вышеперечисленных:

 import {
  Switch,
  BrowserRouter as Router,
  Route,
  Redirect,
} from 'react-router-dom';

import Nav from './Nav';
import Introduction from './components/Introduction.js';
import HowItWorks from './components/HowItWorks.js';
import Blog from './components/Blog.js';
import Shop from './components/Shop.js';
import TheBook from './components/TheBook.js';
import Footer from './Footer.js';


function App() {
    return (
    <> 
      <div className="App">
        <Router>
          <Nav />
          <Switch>          
          <Route path="/Introduction" exact component={Introduction}></Route>
          <Route path='/HowItWorks' exact component={HowItWorks}></Route>          
          <Route path="/Shop" exact component={Shop}></Route>
          <Route path="/Blog" exact component={Blog}></Route>
          <Route path="/TheBook" exact component={TheBook}></Route>
          </Switch>
        </Router>
        <Footer />
         
      </div>  
    </>
    );
}

  export default App;

Если я нажму ссылку на «Книгу» в навигаторе, она будет работать нормально… Есть идеи, почему это происходит ?

Комментарии:

1. Что у тебя в голове <Footer /> ?

2. Где <Link to="/TheBook">Continue</Link> находится визуализируемое изображение? Ошибка заключается в том, что это находится за пределами Router .

3. Ссылка находится в модуле footer.js Этот модуль экспортируется в App.js App.js экспортируется в index.js и приложение (которое включает в себя все) отображается там.

4. Footer.js содержит ссылку на модуль «Книга», изображение и анимированную стрелку

5. функция Нижний колонтитул() { возврат ( <> <><имя класса div=»Нижний колонтитул»> <имя класса div=»Нижний колонтитул»><класс div=»Перемещение»> <класс div=»Перемещение»><класс img=»предварительный заказ»src={imgpreorderarrow} alt=»книга предварительных заказов alt»/> <класс img=»предварительный заказ»src={imgpreorderarrow} alt=»книга предварительного заказа alt»/></div> </div><имя класса div=»Букконтейнер»> <имя класса div=»Букконтейнер»><класс img=»imgBlueBook»src={imgBlueBook} alt=»Книга»/> <класс img=»imgBlueBook»src={imgBlueBook} alt=»Книга»/><имя класса div=»Фотокнига»> <имя класса div=»Кнопка»Книга»><a2 href={«/Книга»}>Узнать больше<a2 href={«/Книга»}></a2> {/* </a2><Ссылка на=»/Книга»>Продолжить<Ссылка на=»/Книга » ></Ссылка> */} </Ссылка></div> </div></div> </div></div> </div></ div> < / div > < / div > < / div > < / div > < / div > < / div > < / div></>);} экспорт нижнего колонтитула по умолчанию;

Ответ №1:

Хорошо, проблема была, как я и ожидал, не в footer.js код, но в App.js код. В footer.js код, необходимый для перемещения внутри маршрутизатора:

 function App() {
    return (
    <> 
      <div className="App">
        <Router>
        <Footer />  {/* The footer must be inside the router for the              <link> to work */}
          <Nav />
          <Switch>          
          <Route path="/Introduction" exact component={Introduction}></Route>
          <Route path='/HowItWorks' exact component={HowItWorks}></Route>          
          <Route path="/Shop" exact component={Shop}></Route>
          <Route path="/Blog" exact component={Blog}></Route>
          <Route path="/TheBook" exact component={TheBook}></Route>
          </Switch>
        </Router>        
      </div>  
    </>
    );  
}

Теперь это работает должным образом.

Метки: ,