Выберите элемент из массива с помощью строки запроса React Router v4

Question

Я хочу реализовать следующее:

У меня есть массив заданий, которые я перечисляю по категориям:

localhost: 3000 / jobs

Когда пользователь выбирает элемент,в нем перечислены все связанные задания для этой категории:

localhost: 3000 / jobs / search? q = Категория

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

показать этот список заданий следующим образом:

Position 1
Position 2
Position 3

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

localhost: 3000 / search? Q = Category & jobid = 123

Answer 1

Я бы использовал другой подход для отображения подробностей задания.

Вместо того, чтобы использовать параметры URL, вы можете создать новый маршрут, например jobs/:jobId, используя React router, и в каждом объекте задания выможете сделать ссылку.как то так:

// ... the usual imports
class App extends React.Component {

  // your helper methods here to load the state

  render() {
    const {jobs} = this.state; // might be from state or redux
    return (
      <div>
        {jobs.map(job => <Link to=`/jobs/${job.id}`>Job {{job.id}}</Link>)}

        <Switch>
          <Route path='/jobs/:jobId' component={JobDetail}/>
        </Switch>
      </div>
    );
  }

}

class JobDetail extends React.Component {

  constructor(props){
     super(props);
     this.state = { job: null }
  }

  componentDidMount(){
    const {match} = this.props;
    const {jobId} = match.params;
    // maybe do an API call here to fetch the job details
    // and store response on state
    // something like: this.setState({...this.state, job: response.job});
  }

  render() {
    const {job} = this.state;
    return(
       <div>
           <h1>Job Details</h1>
           {/* present your job details here if not null */}
           {{job}}
       </div>
    );
  }

}