상태에 따라 동적 React Route 구성 요소를 만듭니다.

Question

웹 응용 프로그램을 만들고 프론트 엔드에 백엔드 데이터베이스의 응답을 통해 결정되는 수의 "specs"가 있습니다. 내가 원했던 것은 각 사양에 대한 React Route를 만드는 것이다. 백엔드 데이터베이스에 좀 더 많은 스펙을 추가하면 프런트 엔드에 하드 코딩 된 라우트를 추가 할 필요가 없으므로이를 역동적으로 수행하고 싶습니다.

저는 Jumpsuit를 React/Redux 래퍼로 사용하고 있습니다. 스펙의 경우 백엔드에 쿼리하고 스펙을 상태로 배열에 저장합니다. 그러나이 사양 배열 (각 사양에 대해 하나의 경로)을 기반으로 동적으로 경로를 만들려고 시도하면 상태 배열에서이 사양 배열을 얻을 수 있습니다.

아래 코드는 내 코드입니다 (빼기). 지금은 각 동적 경로에 동일한 'Spec'구성 요소를 주려고했지만 몇 개의 단어를 렌더링하는 매우 단순한 구성 요소를 제공하려고했습니다. 클릭 할 때 이러한 경로를 탐색하는 버튼을 만들었지 만 URL을 클릭하면 올바른 경로로 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> 

같은 것을 단순화 할 수 있습니다 얼마나 다른지에 따라 달라집니다

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

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