반응 라우터로 상대 경로 중첩

Question

해당 카테고리와 관련된 제품의 제품 색인 페이지로 연결되는 카테고리 색인 페이지가 있습니다. 그만큼 기능하고 있습니다. 그러나 해당 제품의 특정 쇼 구성 요소에 연결된 제품을 클릭하려고하면 문제가 발생합니다.

router.js

import React from 'react'; 
import { Router, Route, Switch } from 'react-router'; 
import createBrowserHistory from 'history/createBrowserHistory' 
import App from './App'; 
import CategoriesIndexPage from './pages/categories/CategoriesIndexPage'; 
import ProductsIndexPage from './pages/products/ProductsIndexPage'; 
import ProductShow from './pages/products/ProductShow'; 
import LocationsPage from './pages/LocationsPage'; 

const history = createBrowserHistory() 

const router = (
    <Router history={history}> 
    <Switch> 
     <Route exact path='/' component={App}/> 
     <Route path='/categories' component={CategoriesIndexPage}/> 
     <Route path='/locations' component={LocationsPage}/> 
     <Route path='/:category' component={ProductsIndexPage}> 
     <Route path='/:id' component={ProductShow}/> 
     </Route> 
    </Switch> 
    </Router> 
); 

export default router; 

ProductIndexPage.js

import React, { Component } from 'react'; 
import { BWReactData } from '../../config/FirebaseConstants.js'; 
import Head from '../../components/Head.js'; 
import Foot from '../../components/Foot.js'; 
import ProductsIteration from './ProductsIteration'; 

class ProductsIndexPage extends Component { 
    constructor(props){ 
    super(props); 
    this.state = { 
     allProducts: [], 
     loading: true, 
    } 
    } 

    componentDidMount() { 
    ... 
    } 

    render() { 
    let allProducts = this.state.allProducts; 
    let loading = this.state.loading; 
    let categoryURL = this.props.location.state.category; 


    return (
     <div> 
     <Head/> 
     <ProductsIteration 
     allProducts={allProducts} 
     loading={loading} 
     categoryURL={categoryURL} 
     /> 
     <Foot/> 
     </div> 
    ) 
    } 
} 

export default ProductsIndexPage; 

ProductsIteration.js

import React from 'react'; 
import { Link } from 'react-router-dom'; 
import { Col, Row } from 'react-materialize'; 

const ProductsIteration = props => { 
    let category = props.categoryURL; 

    if (props.loading) { 
    return <div>Loading...</div> 
    } 
    return (
    <Row> 
    {props.allProducts.map(function(object) { 
     return (
     <Col s={12} m={6} l={3} key ={object.id}> 
      <div style={styles.wrapper}> 
      <Link to={{ pathname: `${category}/${object.id}`, state: { id: object.id }}}> 
      <img src={object.img} style={styles.image} /> 
      <div style={styles.description}> 
       <div style={styles.descriptionContent}>{object.name}</div> 
      </div> 
      </Link> 
      </div> 
     </Col> 
    ) 
    })} 
    </Row> 
) 
} 

export default ProductsIteration; 

내 반복 구성 요소 내의 링크를 렌더링하는 '/ : 다음은 내 코드입니다 : category/: id '내 navbar에있는 URL이지만 페이지는 아무 것도하지 않습니다. 이것은 라우터를 사용하는 나의 첫 번째 프로젝트이며 모든 지침을 많이 주시면 감사하겠습니다.

Answer 1

은에서가 라우터 V4 반응 :

• 라우터 구성 요소 등이 'react-router-dom'보다는 'react-router'에서 가져옵니다.

• 전통적인 <Router/> 구성 요소가 <BrowserRouter/> 구성 요소로 대체되었습니다.이 구성 요소에는 소품이 필요 없습니다.

• 중첩 경로는 더 이상 규칙이 적용되지 않습니다. 대신 <ProductShow/>을 <ProductIndexPage/> 구성 요소의 <Switch/> 구성 요소 내에 <Route/> 구성 요소의 component 구성 요소로 중첩해야합니다.

아래 예를 참조하십시오.

Router.js :

// React. 
import React from 'react' 

// React Router DOM. 
import { 
    BrowserRouter as Router, 
    Route, 
    Switch 
} from 'react-router-dom' 

// Routes. 
import App from './App' 
import CategoriesIndexPage from './pages/categories/CategoriesIndexPage' 
import ProductsIndexPage from './pages/products/ProductsIndexPage' 
import LocationsPage from './pages/LocationsPage' 

// Router. 
const Router = (
    <Router> 
    <Switch> 
     <Route exact path='/' component={App}/> 
     <Route path='/categories' component={CategoriesIndexPage}/> 
     <Route path='/locations' component={LocationsPage}/> 
     <Route path='/:category/:id?' component={ProductsIndexPage}/> 
    </Switch> 
    </Router> 
) 

// Export. 
export default Router 

ProductIndexPage.js : 이것에 대한

// React. 
import React from 'react' 

// BW React Data. 
import { 
    BWReactData 
} from '../../config/FirebaseConstants.js' 

// Head. 
import Head from '../../components/Head.js' 

// Foot. 
import Foot from '../../components/Foot.js' 

// Products Iteration. 
import ProductsIteration from './ProductsIteration' 

// Product Show. 
import ProductShow from './ProductShow' 

// React Router DOM. 
import { 
    Switch 
} from 'react-router-dom' 

// Products Index Page. 
class ProductsIndexPage extends React.Component { 

    // Constructor. 
    constructor(props){ 

    // Super Props. 
    super(props) 

    // State. 
    this.state = { 
     allProducts: [], 
     loading: true, 
    } 
    } 

    // Did Mount. 
    componentDidMount() { 
    ... 
    } 

    // Render. 
    render() { 
    let allProducts = this.state.allProducts 
    let loading = this.state.loading 
    let categoryURL = this.props.location.state.category 

    return (
     <div> 
     <Head/> 
     <ProductsIteration 
     allProducts={allProducts} 
     loading={loading} 
     categoryURL={categoryURL} 
     /> 
     {this.props.match.params.id ? (<ProductShow/>) : ''} 
     <Foot/> 
     </div> 
    ) 
    } 
}