React.js Route в компонете должны вызваться другие компоненты в зависимости от url

Question

Я начинаю изучать react и пытаюсь его внедрить в свой старый проект. Проблема заключается в следующем.

Есть App.js с Роутами

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

import Bets from './components/bets/bets';

function App() {
  return (
    <BrowserRouter>
        <Route exact path="/bets" component={Bets}/>
        <Route exact path="/bets/live" component={Bets}/>
        <Route exact path="/bets/ended" component={Bets}/>
    </BrowserRouter>
  );
}

export default App;

Роуты вызывают Bets.js Содержимое Bets.js

import React from 'react';
import {NavLink} from 'react-router-dom';

import BetsLive from './bets_live';
import BetsEnded from './bets_ended';
import BetsUpcoming from './bets_upcoming';

const Bets = (props) => {
    return (
        <div className="row container">
            <NavLink to="/bets">
                Upcomming
            </NavLink>

            <NavLink to="/bets/live">
                Live
            </NavLink>

            <NavLink to="/bets/ended">
                Results
            </NavLink>

            // здесь

        </div>
    );
}

export default Bets;

Там где "//здесь" должен быть определенный компонент в зависимости от URL. примеры ниже

/bets  =  <BetsUpcoming/>
/bets/ended  =  <BetsEnded/>
/bets/live = <BetsLive/>

Как решить данную проблему? Есть идея делать через props (в Route передавать какой то параметр), и уже через проверку делать return (кучка кода <нужный блок/> кучка кода)

Answer 1

Можно сделать примерно так:

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

const Header = () => {
  return (
    <div className="row container">
        <NavLink to="/bets">Upcomming</NavLink>
        <NavLink to="/bets/live"> Live </NavLink>
        <NavLink to="/bets/ended"> Results </NavLink>
    </div>
  );
};

const BetsUpcoming = () => <h1>BetsUpcoming</h1>;
const BetsLive = () => <h1>BetsLive</h1>;
const BetsEnded = () => <h1>BetsEnded</h1>;

const App = () => {
  return (
    <BrowserRouter>
        <Header />
        <Route exact path="/bets" component={BetsUpcoming} />
        <Route exact path="/bets/live" component={BetsLive} />
        <Route exact path="/bets/ended" component={BetsEnded} />
    </BrowserRouter>
  );
};
export default App;

БЛОГ НА HUSL

React.js Route в компонете должны вызваться другие компоненты в зависимости от url

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