与之反应路由器嵌套相对路由

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;

我的迭代组件内的链接呈现“/：类/：身份证”的网址在我的导航栏，但页面不执行任何操作。这是我第一次使用的项目路由器和任何指导，将不胜感激。

Answer 1

在阵营路由器V4：

• 路由器组件从'react-router-dom'而不是'react-router'进口。
• 传统<Router/>组件已被替换为<BrowserRouter/>部件，其不需要道具。
• 嵌套的路线不再是惯例。取而代之的是，你必须巢您<ProductShow/>作为component组件内的<Route/>组件中的<Switch/>组件的<ProductIndexPage/>道具。

参阅下面的一个例子。

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