0

Друзья, у меня это код со роутами работает, это главная страница

import {BrowserRouter, Route} from 'react-router-dom';

const App = () => {
  return (
      <BrowserRouter>
          <div className="app-wrapper">
            <Header/>
            <Aside/>
            <Route path='/Main' component={Main}/>
            <Route path='/Dialogs' component={Dialogs}/>
          </div>
      </BrowserRouter>
  );
};

а вот этот код, уже внутри Main, не работает, хотя пути написал верно и код вроде схожий... на что обратить внимание, в чем может быть проблема?

import {BrowserRouter, Route} from 'react-router-dom';

const Poems = () => {
  return (
        <BrowserRouter>
            <div className={classes.poems}>
                    <Route path='/poem1' component={Poem1}/>
                    <Route path='/poem2' component={Poem2}/>
            </div>
        </BrowserRouter>
  )
};
2
  • 1
    Проблема связана с тем, что у тебя вложенные BrowserRouter. Сделай весь роутинг на уровне App 17 мар 2020 в 8:17
  • Опишите все ваши Route в одном месте, просто дополните код со роутами на главной странице. А всё, что вложенное, вместо Route - используйте Link. В принципе, ничего сложного и всё заработает как нужно. 19 мар 2020 в 7:36

1 ответ 1

0

в BrowserRouter оборачиваем только 1 раз всё приложение. Далее рабочий код:

import React from "react";
import { BrowserRouter, Route, Link } from "react-router-dom";

const Main = () => {
  return (
    <div>
        <h4>Main</h4>
        <Poems />
    </div>
  );
};

const Poems = () => {
  return (
    <div>
        <Link to="/main/poem1">To Poem1</Link>
        <Link to="/main/poem2">To Poem2</Link>
        <Route path="/main/poem1" component={() => <h3>Poem1</h3>} />
        <Route path="/main/poem2" component={() => <h3>Poem2</h3>} />
    </div>
  );
};

const App = () => {
  return (
    <BrowserRouter>
        <div>
            <h2>Header</h2>
            <Link to="/main">To Main</Link>
            <Link to="/dialogs">To dialogs</Link>
            <Route path="/main" component={Main} />
            <Route path="/dialogs" component={() => <h3>Dialogs</h3>} />
        </div>
    </BrowserRouter>
  );
};
export default App;

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.