как использовать реагирующий маршрутизатор с параметрами, если не все мои параметры требуются всегда?

Question

Я пытаюсь создать «простую» страницу индексации видео youtube с помощью стека MERN, но я застрял в этой части.

Это моя модель коллекции для mongodb:

const replaySchema = new Schema({

    game: {type: String, requiered:true},
    link: {type: String, requiered:true,unique: true},
    player1: {type: String, required: true},
    player2: {type: String, required: true},
    character1: {type: String, required: true},
    character2: {type: String, required: true},
    winner: {type: String, required: true}


},{
    timestamps:true,

});

const Replay = mongoose.model('Replay', replaySchema);

Итак, пользователь заполняет форму, и объект отправляется в базу данных.

Это когда возникает моя проблема. Затем я бы хотел, чтобы пользователь мог заполнить аналогичную форму для запроса в базе данных повторов, следующих за его фильтрами. Например, пользователь может захотеть увидеть все повторы, сохраненные от определенного игрока, или от определенного игрока в определенной игре, или от определенного персонажа, используемого определенным игроком против другого игрока.

Как видите, бывают случаи, когда параметр "game" URL-адреса не нужен, и то же самое со всеми другими переменными.

Я собирался подойти к этому так. Пользователь заполняет форму фильтра, значения берутся из нее и создают URL запроса при отправке формы, который перенаправляет на компонент с таблицей с желаемыми данными (повторы). Я пытался использовать для этого response-router-dom таким образом:

App. js

function App() {
  return (
    <Router>
      <Navbar />
      <div className="container">


        <br/>
        <Route path="/" exact component={ReplaysList} />
        <Route path="/create" exact component={CreateReplay} />
        <Route path="/search" exact component={SearchReplay} />
        <Route path="/search/:game/:p1/:ch1/:p2/:ch2/:w" exact component={SearchReplay} />


      </div>

    </Router>
    // Hay que introducir un route que tenga los parametros posibles introducidos por un formulario
  );
}

Но тогда я не знаю, что на самом деле делаем на поиск. js файл маршрута. Может ли он вообще получать какие-то параметры URL и работать с ними?

Спасибо.

Answer 1

Я думаю, что лучший способ - использовать параметры запроса. но если вы не хотите использовать это, у вас может быть более одного маршрута, как показано ниже:

<Route path="/search/:game/:p1/:ch1/" exact component={SearchReplay} />
<Route path="/search/:game/:p1/:ch1/:p2/:ch2/" exact component={SearchReplay} />
<Route path="/search/:game/:p1/:ch1/:p2/:ch2/:w" exact component={SearchReplay} />

Answer 2

В этом случае может быть проще использовать параметры запроса URL. Итак, учитывая path="/search"

<Route path="/search" exact component={SearchReplay} />

, вы можете получить доступ к параметрам запроса из location route prop.

location.search

Вы можете создать URL как

/search?game=someGame&p1=player1&ch1=char1&p2=player2&ch2=char2&w=player2

location.search возвращает строку, представляющую параметры запроса

"?game=someGame&p1=player1&ch1=char1&p2=player2&ch2=char2&w=player2"

Но вы можете использовать любой обработчик строки запроса для извлечения объекта, представляющего параметры запроса

import qs from 'query-string';

...
qs.parse(location.search)

дает

{
  game: 'someGame',
  p1: 'player1',
  ch1: 'char1',
  p2: 'player2',
  ch2: 'char2',
  w: 'player2',
}

Обработка параметров запроса DEMO