Маршрут React. js в компоненте должен вызывать другие компоненты в зависимости от URL - PullRequest
Новая
       19

Маршрут React. js в компоненте должен вызывать другие компоненты в зависимости от URL

1 голос
/ 25 апреля 2020

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

Есть приложение. 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;

Маршруты вызова Ставки. js Содержание из Ставки. 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;

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

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

Как решить эту проблему? Есть идея сделать это через props (передать какой-то параметр в Route) и выполнить возврат через проверку ( куча кода куча кода )

Ответы [ 3 ]

0 голосов
/ 25 апреля 2020

Вам нужно больше посмотреть в документации React Router

Как я правильно понимаю, вам нужно реализовать простой список ToDo-маршрутизаторов с переходом к соответствующему компоненту по нажатию кнопки. Затем вы должны поместить соответствующий компонент в соответствующий маршрут: 

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

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

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

И в компоненте Bets реализовано движение по маршрутам: 

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

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;

Ключевой момент заключается в том, что вы должны передать компонент в component опору <Route />, , которую вы хотите увидеть в соответствующем пути.

0 голосов
/ 25 апреля 2020

Я бы go с параметром маршрута (вроде реквизита, как вы упомянули): 

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

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

function App() {
  return (
    <BrowserRouter>
        <Route path="/bets/:whatbets" component={Bets}/>
    </BrowserRouter>
  );
}

export default App;

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

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

const Bets = (props) => {
    const {whatbets} = useParams()

    return (
        <div className="row container">
            <NavLink to="/bets">
                Upcomming
            </NavLink>

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

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

       {whatbets === 'live' && <Live />}
       {whatbets === 'ended' && <Ended />}
       {!whatbets && <WithoutParams />}


        </div>
    );
}

export default Bets;
0 голосов
/ 25 апреля 2020

Добавить BetsLive, BetsEnded и BetsUpcoming в маршрутах: 

function App() {
  return (
    <BrowserRouter>
        <Bets /> { /* use NavLink to make link to specific routes. */ }
        <Switch>
            <Route exact path="/bets" component={BetsUpcoming}/>
            <Route exact path="/bets/live" component={BetsLive}/>
            <Route exact path="/bets/ended" component={BetsEnded}/>
        </Switch>
    </BrowserRouter>
  );
}

Также вы можете использовать Switch и Route для вложения маршрутов, посмотрите пример в документации .

...