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

IT技术 javascript reactjs react-router react-router-v4
2021-05-28 15:56:11

我希望能够拥有一个投资组合页面 (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>
      )
    }
  }

投资组合.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>
    )
  }
}
1个回答

您应该在react-router中为每个不同的视图定义一个路由,

 <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组件中访问路由器props,

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

例如,您可以在 CaseStudy 组件中获取动态参数,例如,

 this.props.match.caseSlug