反応ルータを使用した相対ルートのネスト

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; 

リンクを「/レンダリング：カテゴリ/：id '私のnavbarのURLですが、ページは何もしません。これはルータを使った私の最初のプロジェクトであり、どんな指導も大変ありがとうと思います。

Answer 1

でルータV4と反応：例えば

• ルータコンポーネントは、'react-router-dom'なく'react-router'から輸入されます。

• 従来の<Router/>コンポーネントは、小道具を必要としない<BrowserRouter/>コンポーネントに置き換えられました。

• ネスティングルートはもはや慣例ではありません。代わりに、あなたはあなたの<ProductIndexPage/>コンポーネント内<Switch/>コンポーネント内<Route/>コンポーネントのcomponent小道具として巣あなたの<ProductShow/>する必要があります。

以下の例を参照してください。

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> 
    ) 
    } 
}