代码之家 › 专栏 › 技术社区 › mcw

用react路由器嵌套相对路由

react-router-dom react-router-v4 react-router reactjs

mcw · 技术社区 · 7 年前

我有一个类别索引页面,链接到特定于该类别的产品的产品索引页面。这些都在发挥作用。但当我试图点击一个链接到特定于该产品的show组件的产品时,我遇到了麻烦。以下是我的代码:

路由器。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;

产品定位。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”url,但页面什么也不做。这是我的第一个项目使用路由器和任何指导将不胜感激。

1 回复 | 直到 7 年前

Arman Charan 6 年前

在React路由器v4中:

路由器组件从导入 'react-router-dom' 而不是 'react-router' .
传统的 <Router/> 组件已替换为 <BrowserRouter/> 组件,不需要道具。
筑巢路线不再是惯例。相反,你必须把你的 <ProductShow/> 作为一个 component a的支柱 <Route/> a中的组件 <Switch/> <ProductIndexPage/>

请参阅下面的示例。

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