ReactRouter не корректно работает

@andbel2 · Регистрация: 25.05.2022

Студворк — интернет-сервис помощи студентам

Здравствуйте. Только знакомлюсь с React и столкнулся с такой проблемой: React Router меняет содержимое страницы только при перезагрузке(Я должен сначала выбрать раздел меню, а потом перезагрузить страницу и содержимое поменяется.). Можете подсказать что это может быть?

Код Менюшки:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import React from 'react';
import bike from "../img/Untitled.svg";
import {
    BrowserRouter as Router,
    Routes,
    Route,
    Link
} from "react-router-dom";
import NavHeaders from "./nav/navHeaders";
import FirstBike from "./main/firstBike";
import Repair from './main/Repair'
const Aside = () => {
    return (
        <aside className='leftMenu'>
 
                <header className='leftMenu__header'>
                    <div className="leftMenu__nameofshop">
                        <h1>About Bicycle</h1>
                    </div>
                    <div className="leftMenu__logo">
                        <img src={bike} alt="logo"/>
                    </div>
                </header>
                
                    <nav className='leftMenu__nav nav'>
                        <ul>
                            <li>
                                <NavHeaders srcOfLink='FirstBike' itemContent='Выбор вервого велосипеда'/>
                            </li>
                            <li>
 
                                <NavHeaders srcOfLink='Repair' itemContent='Обслуживание велосипедов'/>
                                <div className="nav__options">
                                    <ul>
                                        <li><Link to='/lubrication'>Смазка цепи</Link></li>
                                        <li><Link to='/brakes'>Тормозная система</Link></li>
                                        <li><Link to='/changeChain'>Смена цепи</Link></li>
                                        <li><Link to='/changeSpeeds'>Замена скоростника</Link></li>
                                        <li><Link to='/ajustSpeed'>Регулировка скоростников</Link></li>
                                        <li><Link to='/optionsMore'>Больше</Link></li>
                                    </ul>
                                </div>
                            </li>
                            <li>
                                <NavHeaders srcOfLink='AllAbout' itemContent='Все о комплектующих'/>
                                <div className="nav__options">
                                    <ul>
                                        <li><Link to='/accWheeld'>Все о колесах</Link></li>
                                        <li><Link to='/accBrakes'>Все о тормозах</Link></li>
                                        <li><Link to='/accTransmission'>Все о трансмисии</Link></li>
                                        <li><Link to='/accRama'>Все о раме</Link></li>
                                        <li><Link to='/accAmortizators'>Все о амортизаторах</Link></li>
                                    </ul>
                                </div>
                            </li>
                            <li>
                                <NavHeaders srcOfLink='bikesHistory' itemContent='Общая история велосипедов'/>
                            </li>
                            <li>
                                <NavHeaders srcOfLink='BikeAndHealth' itemContent='Велосипед и здоровье'/>
                            </li>
                        </ul>
                    </nav>
 
                </Router>
        </aside>
    );
};
 
export default Aside;

Код главной страницы FirstBike:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
import React from 'react';
 
const FirstBike = (props) => {
    return (
        <div className='main'>
            <header className='nameOfPage'>
                <h1>{props.nameOfPage}</h1>
            </header>
            <section className='pageSection'>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Ab, aut consectetur cupiditate delectus dicta dolorum eligendi exercitationem explicabo fuga iste iure magni
                    minus nobis perspiciatis quo reiciendis sint. Aliquam aut consequatur, consequuntur dicta dolorem esse, fuga
                    illum ipsam laudantium magnam natus necessitatibus nihil numquam odit perspiciatis placeat praesentium quae
                    ratione sit vero. Cum dignissimos eveniet illum incidunt laboriosam modi veritatis voluptate! Blanditiis cupiditate
                    debitis ducimus hic minima perspiciatis possimus quasi quibusdam, similique tempore vel voluptas! Asperiores cum
                    est minus mollitia nobis numquam, tenetur voluptas voluptatibus. Aliquid assumenda at ea et fuga maxime quisquam repellat
                    sed totam voluptates? Asperiores, at, <em>sit</em>.
                </p>
            </section>
            <section className='pageSection'>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Ab, aut consectetur cupiditate delectus dicta dolorum eligendi exercitationem explicabo fuga iste iure magni
                    minus nobis perspiciatis quo reiciendis sint. Aliquam aut consequatur, consequuntur dicta dolorem esse, fuga
                    illum ipsam laudantium magnam natus necessitatibus nihil numquam odit perspiciatis placeat praesentium quae
                    ratione sit vero. Cum dignissimos eveniet illum incidunt laboriosam modi veritatis voluptate! Blanditiis cupiditate
                    debitis ducimus hic minima perspiciatis possimus quasi quibusdam, similique tempore vel voluptas! Asperiores cum
                    est minus mollitia nobis numquam, tenetur voluptas voluptatibus. Aliquid assumenda at ea et fuga maxime quisquam repellat
                    sed totam voluptates? Asperiores, at, <em>sit</em>.
                </p>
            </section>
            <section className='pageSection'>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Ab, aut consectetur cupiditate delectus dicta dolorum eligendi exercitationem explicabo fuga iste iure magni
                    minus nobis perspiciatis quo reiciendis sint. Aliquam aut consequatur, consequuntur dicta dolorem esse, fuga
                    illum ipsam laudantium magnam natus necessitatibus nihil numquam odit perspiciatis placeat praesentium quae
                    ratione sit vero. Cum dignissimos eveniet illum incidunt laboriosam modi veritatis voluptate! Blanditiis cupiditate
                    debitis ducimus hic minima perspiciatis possimus quasi quibusdam, similique tempore vel voluptas! Asperiores cum
                    est minus mollitia nobis numquam, tenetur voluptas voluptatibus. Aliquid assumenda at ea et fuga maxime quisquam repellat
                    sed totam voluptates? Asperiores, at, <em>sit</em>.
                </p>
            </section>
            <section className='pageSection'>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Ab, aut consectetur cupiditate delectus dicta dolorum eligendi exercitationem explicabo fuga iste iure magni
                    minus nobis perspiciatis quo reiciendis sint. Aliquam aut consequatur, consequuntur dicta dolorem esse, fuga
                    illum ipsam laudantium magnam natus necessitatibus nihil numquam odit perspiciatis placeat praesentium quae
                    ratione sit vero. Cum dignissimos eveniet illum incidunt laboriosam modi veritatis voluptate! Blanditiis cupiditate
                    debitis ducimus hic minima perspiciatis possimus quasi quibusdam, similique tempore vel voluptas! Asperiores cum
                    est minus mollitia nobis numquam, tenetur voluptas voluptatibus. Aliquid assumenda at ea et fuga maxime quisquam repellat
                    sed totam voluptates? Asperiores, at, <em>sit</em>.
                </p>
            </section>
            <section className='pageSection'>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Ab, aut consectetur cupiditate delectus dicta dolorum eligendi exercitationem explicabo fuga iste iure magni
                    minus nobis perspiciatis quo reiciendis sint. Aliquam aut consequatur, consequuntur dicta dolorem esse, fuga
                    illum ipsam laudantium magnam natus necessitatibus nihil numquam odit perspiciatis placeat praesentium quae
                    ratione sit vero. Cum dignissimos eveniet illum incidunt laboriosam modi veritatis voluptate! Blanditiis cupiditate
                    debitis ducimus hic minima perspiciatis possimus quasi quibusdam, similique tempore vel voluptas! Asperiores cum
                    est minus mollitia nobis numquam, tenetur voluptas voluptatibus. Aliquid assumenda at ea et fuga maxime quisquam repellat
                    sed totam voluptates? Asperiores, at, <em>sit</em>.
                </p>
            </section>
            <section className='pageSection'>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Ab, aut consectetur cupiditate delectus dicta dolorum eligendi exercitationem explicabo fuga iste iure magni
                    minus nobis perspiciatis quo reiciendis sint. Aliquam aut consequatur, consequuntur dicta dolorem esse, fuga
                    illum ipsam laudantium magnam natus necessitatibus nihil numquam odit perspiciatis placeat praesentium quae
                    ratione sit vero. Cum dignissimos eveniet illum incidunt laboriosam modi veritatis voluptate! Blanditiis cupiditate
                    debitis ducimus hic minima perspiciatis possimus quasi quibusdam, similique tempore vel voluptas! Asperiores cum
                    est minus mollitia nobis numquam, tenetur voluptas voluptatibus. Aliquid assumenda at ea et fuga maxime quisquam repellat
                    sed totam voluptates? Asperiores, at, <em>sit</em>.
                </p>
            </section>
 
        </div>
    );
};
 
export default FirstBike;

Код App.js:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import bike from './img/Untitled.svg'
import './css/style.css'
import {
    BrowserRouter as Router,
    Routes,
    Route,
    Link
} from "react-router-dom";
import NavHeaders from "./components/nav/navHeaders";
import FirstBike from "./components/main/firstBike";
import Repair from './components/main/Repair'
import Main from './components/main'
import React from "react";
import Aside from "./components/Aside";
 
function App() {
    return (
        <div className="App">
 
            <div className="emptyBlock"></div>
            <Aside/>
            <main>
            <Router>
                <Routes>
                    <Route path="/FirstBike" element={<FirstBike/>}/>
 
                    <Route path="/Repair" element={<Repair />}/>
 
 
                </Routes>
            </Router>
 
            </main>
 
        </div>
);
}
 
export default App;

Код второй страницы(Repair, чисто для проверки):

JavaScript
1
2
3
4
5
6
7
8
9
10
11
import React from 'react';
 
const Repair = () => {
    return (
        <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, veniam?</p>
        </div>
    );
};
 
export default Repair;

Сделал пока только 2 страницы, на них пробую и работает не корректно

@mr_dramm · 11.09.2022, 20:48

Попробуйте осилить это должен получиться этотпример

В v6 работает так
BrowserRouter > Routes > Route хранит ссылки на компоненты которые будут монтироваться по определенному url path в компоненте а вложенные маршруты в компоненте Outlet

Добавлено через 1 минуту
ВЫ как минимум используете несуществующие пути в Link

Сообщение от andbel2

<li><Link to='/lubrication'>Смазка цепи</Link></li>
<li><Link to='/brakes'>Тормозная система</Link></li>
<li><Link to='/changeChain'>Смена цепи</Link></li>
<li><Link to='/changeSpeeds'>Замена скоростника</Link></li>
<li><Link to='/ajustSpeed'>Регулировка скоростников</Link></li>
<li><Link to='/optionsMore'>Больше</Link></li>

Добавлено через 4 минуты
Я не пробовал использовать BrowserRouter внутри компонента App, ну хотябы потому что компонент App тоже должен монтироваться с помощью роутера а не сам по себе, потому нужно начать с перестройки архитектуры Вашего приложения

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
const root = ReactDOM.createRoot(
  document.getElementById("root")
);
root.render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />} />
      <Route path="/FirstBike" element={<FirstBike/>}/>
       <Route path="/Repair" element={<Repair />}/>
    </Routes>
  </BrowserRouter>
);

и не забудьте про 404

@andbel2 · 16.09.2022, 17:19 **[ТС]**

Спасибо! Насколько я понял мне надо еще раз изучить всю теорию. Как покажется что понял вернусь снова к этой теме!

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .

@andbel2 0 / 0 / 0 Регистрация: 25.05.2022 Сообщений: 7
	16.09.2022, 17:19 [ТС]
	Спасибо! Насколько я понял мне надо еще раз изучить всю теорию. Как покажется что понял вернусь снова к этой теме! 0

ReactRouter не корректно работает

Решение