Создание динамических компонентов React Route на основе состояния

Question

Я создаю webapp, и у меня будет множество «спецификаций» в интерфейсе, число которых определяется посредством ответа из базы данных. Я хочу создать React Route для каждой спецификации. Я хочу сделать это динамически, таким образом, если я добавлю несколько дополнительных спецификаций в базовую базу данных, тогда мне не придется добавлять пучку жестко закодированных маршрутов в интерфейсе, чтобы соответствовать.

Я использую комбинезон в качестве обертки React/Redux. Для спецификаций я запрашиваю бэкэнд и сохраняю спецификации в массиве в состоянии. Я могу получить этот массив спецификаций из состояния без проблем, однако, если я попытаюсь динамически создавать маршруты на основе этого массива spec (один маршрут для каждой спецификации), то он не создает их.

Ниже мой код (минус импорт). На данный момент я просто попытался дать каждому динамическому маршруту тот же компонент «Spec», просто очень простой компонент, который делает несколько слов. Я создал несколько кнопок, которые перемещаются по этим маршрутам по клику, но когда я нажимаю на них, URL-адрес изменяется на правильный маршрут, но страница вообще не изменяется. И если я напечатаю реквизит моего основного компонента на консоль и посмотрю на маршруты, я вижу, что динамических нет. Я не получаю никаких консольных ошибок.

export default Component({ 

    componentDidMount() { 
     // Check if the specs need to be loaded 
     if (this.props.specs.length == 0) { 
      axios.get('/getspecs') 
       .then((specs) => { 
        // Load specs into state 
        QuizList.loadSpecs(specs.data.facet_counts.facet_fields.spec.filter((val, i) => {return (i%2==0)})); 
       }) 
       .catch((error) => { 
        console.log(error); 
       }); 
     } 
    }, 

    loadSpecRoutes() { 
     // Loop through specs array in state and create route for each 
     return this.props.specs.map((spec, i) => { 
      return(
       <Route path={`/spec/${spec}`} component={Spec} /> 
      ); 
     }); 
    }, 

    render() { 
     return (
      <Router history={browserHistory}> 
       <Route path='/' component={App}> 
       <IndexRoute component={Home}/> 
       <Route path='/account' component={Account}/> 
       <Route path='/quizzes' component={QuizRoot}/> 
       {this.loadSpecRoutes()} <-- where I want to load routes 
       </Route> 
      </Router> 
     ); 
    } 
}, (state) => ({ 
    auth: state.user.auth, 
    specs: state.quizList.specs 
})) 

Не уверен, что, если я просто буду об этом все неправильно, но как создать компонент маршрута для каждого значения в массиве состояния?

Answer 1

Вместо того, чтобы создавать маршрут для каждой спецификации, вы можете использовать динамический маршрут и создавать компоненты-обертки, которые могут динамически отображать вашу спецификацию. Обертка может делать очень мало, даже тег div. Или это может быть довольно шаблон, такой как страница блога, которая имеет все, кроме стиля статьи. Это зависит от того, насколько отличается каждый из вашей спецификации является

Теперь мы смотрим на маршрут, он может быть упрощен к чему-то вроде

<Router history={browserHistory}> 
    <Route path='/' component={App}> 
    <IndexRoute component={Home}/> 

    <Route path='/account' component={Account}/> 
    <Route path='/quizzes' component={QuizRoot}/> 
    <Route path='/specs/:spec' component={Spec} /> 
    </Route> 
</Router> 

Тогда в Spec компонент, вы можете делать такие вещи, как

class Spec extends Component { 
    render() { 
    const {spec} = this.props.params 

    switch (spec) { 
     case 'spec1': 
     return <SpecTypeA /> 
     case 'spec2': 
     return <SpecTypeB /> 
     default: 
     return <GeneralSpec /> 
    } 
    } 
}