Question

我希望能够拥有一个投资组合页面（example.com/portfolio），以及一个用于个案研究的动态路线（example.com/portfolio/case-study/dynamic-url-slug）。目前，应在其自己的页面中呈现的新组件仍在页面内呈现（可理解，因为标记在包含div中声明路由）。但是如何让它在自己的页面上呈现呢？

App.js（声明所有路线）

import React, { Component } from 'react';
import { Switch, Route } from 'react-router-dom';

import Home from './components/Pages/Home/Home';
import About from './components/Pages/About/About';
import Portfolio from './components/Pages/Portfolio/Potfolio';
import CaseStudy from './components/Pages/Portfolio/CaseStudyPage';


export default class App extends Component {

 render() {
  return (
    <div className="icon-container" id="outer-container"> 
        <div className="pages">
            <Switch>

              <Route exact path='/' component={ Home } />
              <Route path='/about' component={ About } />
              <Route path='/portfolio' component={ Portfolio } />

              <Route exact path={`/portfolio/case-study/:caseSlug`}
                render={(props) => <CaseStudy />} />
            </Switch>

        </div>
    </div>
      )
    }
  }

Portfolio.js

import React, { Component } from 'react';

import '../styles/vendor/swiper/swiper.min.css';
import Swiper from 'react-id-swiper';
import { Link, Route } from 'react-router-dom';
import CaseStudyPage from './Pages/Work/CaseStudyPage';

const case_studiesURL = "http://myprivateblogapi.com/wp-json/wp/v2/case_studies?_embed";
const case_URL = '/portfolio/case-study/'; 

export default class Portfolio extends Component {
  constructor(props) {
    super(props);
    this.state = {
      case_studies: [],
      isLoading: true,
      requestFailed: false
    }
  }

  componentDidMount() {
    fetch(case_studiesURL)
    {/* fetching all the appropriate data */} 
  }
    renderPortfolioItem(data) {
      return props => <CaseStudyPage data={data} {...props} />
    }

  render() {

    if(this.state.isLoading) return <span>Loading...</span>

    const params = {
      {/* swiper parameters */}
    }

    let case_studies_items = this.state.case_studies.map((case_studies_item, index) => {

      return (
          <div className="portfolio-slide" id={`swiper-slide-${index}`} 
          key={index}
          >
           <Link className="portfolio-link" 
              to={`${case_URL}${case_studies_item.slug}`}>
              <h3 className="portfolio-swiper--slide-title"> {case_studies_item.title.rendered}</h3>
            </Link>

            <Route exact path={`${case_URL}:caseSlug`}
              render={this.renderPortfolioItem(case_studies_item)} />
          </div>

    )

    });

    return(
        <div className="portfolio-swiper--container">
        <Swiper {...params}>
          {case_studies_items}
          </Swiper>
      </div>
    )
  }
}

Answer 1

您应该为react路由器中的每个不同视图定义路由，

 <Switch>
          <Route exact path='/' component={ Home } />
          <Route exact path='/about' component={ About } />
          <Route exact path='/portfolio' component={ Portfolio } />
          <Route exact path='/portfolio/case-study' component={ CaseStudy } />
          <Route exact path='/portfolio/case-study/:caseSlug' component {CaseStudyDetails} />
 </Switch>

并且您不需要创建渲染方法来将props传递给视图组件。如果已经将其呈现到路由器中，您可以轻松地到达react组件内的路由器道具

this.props.match
this.props.location
this.props.history

作为示例，您可以在CaseStudy组件中获取动态参数，例如

 this.props.match.caseSlug

在新页面上渲染嵌套路径组件

1 个答案: