저는 웹앱을 만들고 있으며 프런트 엔드에 여러 '사양'이 있으며, 그 수는 백엔드 데이터베이스의 응답을 통해 결정됩니다. 내가 원하는 것은 각 사양에 대한 React Route를 만드는 것입니다. 이 작업을 동적으로 수행하고 싶습니다. 그런 식으로 백엔드 데이터베이스에 사양을 더 추가하면 일치시키기 위해 프런트 엔드에 하드 코딩 된 경로를 추가 할 필요가 없습니다.
저는 Jumpsuit를 React / Redux 래퍼로 사용하고 있습니다. 사양의 경우 백엔드를 쿼리하고 사양을 상태의 배열에 저장합니다. 이 사양 배열을 문제없이 상태에서 얻을 수 있지만,이 사양 배열 (각 사양에 대해 하나의 경로)을 기반으로 라우트를 동적으로 생성하려고하면 생성되지 않습니다.
아래는 내 코드입니다 (가져 오기 제외). 지금은 각 동적 경로에 동일한 '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
}))
이 모든 방법이 잘못되었는지 확실하지 않지만 상태 배열의 각 값에 대해 Route 구성 요소를 어떻게 생성합니까?
각 사양에 대한 경로를 만드는 대신 실제로 동적 경로를 사용하고 사양을 동적으로 렌더링 할 수있는 래퍼 구성 요소를 만들 수 있습니다. 래퍼는 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 />
}
}
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다