Про Route React.js

Question

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

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>
  )
};

Answer 1

в 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;

БЛОГ НА HUSL

Про Route React.js

Ответы (1 шт):