React：如何直接导航到动态组件

Question

我有一个父组件，可以显示和索引组件，也可以是特定项目。单击项目标题时，URL将更改为该项目ID。

然后使用项目标题作为该网址的一部分，从API调用中提取的资产构建项目。

如何直接导航到该项目实例（如果手动输入了URL，例如？

我试图尽量减少代码。如有必要，请尽快添加/省略以找到解决方案。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { BrowserRouter } from 'react-router-dom'
import { Route, Link, Redirect } from 'react-router-dom'

var Dropbox = require('dropbox');
var dbx = new Dropbox({ accessToken: ###### });

class Parent extends React.Component {
  constructor(props){
    super(props);
    this.state = {
        imageSource: [],
        imageTitles: [],
        setProjectTitle: null,
      }
    }

  indexTitleClick(title) {
    this.setState({
      setProjectTitle: title,
    });
  }

  componentDidMount(){
    dbx.filesListFolder({path: ''})
      .then(function(response) {
        // make call To dropbox API, sets states for imageSource & imageTitles
    });
   }

  render(){
    if (typeof this.props.match.params.projectId === 'string') {
      if (this.state.imageTitles.length > 0) {
        return(
          <div className="parentWrapper">
            <Project title={this.state.imageTitles[parseInt((this.props.match.params.projectId),10)]}/>
         </div>
        );
     } else {
       return(
        <div className="parentWrapper">
          <p>foo</p>
        </div>
       );
     }
     } else {
       return(
         <div className="parentWrapper">
           <Index imageSource={this.state.imageSource} imageTitles={this.state.imageTitles} indexTitleClick = {this.indexTitleClick}/>
        </div>
       );
     }


  }

}


class Index extends React.Component{

  render(){
    let titles = this.props.imageTitles.map((el, i) => <p>{el}</p>)
    let images = this.props.imageSource.map((el, i) =>
        <div key={i} className="imageContainer">
          <Link className="imageTitle" to={`/folio/${i}`}>
            <img key={i} alt={titles[i].props.children} className='indexImages' src={el} />
          </Link>
          <Link className="imageTitle" to={`/parent/${i}`}>{parent[i]}</Link>
        </div>
        )

        return (
          <div className="indexWrapper">
            {images}
          </div>
        );
    }
}


class Project extends React.Component{


  constructor(){
      super();
      this.state = {
          fileSource: [],
          projectDescription: [],
          projectLink: [],
          projectVideoURL: [],
          imageKey: 0,
      }
  }

  componentDidMount(){
    var that = this;
    var sources = [];
    var projectDescription = [];
    var projectVideoURL = [];
    var projectLink = [];

    var link = "/"+this.props.title;
      dbx.filesListFolder({path: link})
        .then(function(response) {

          // uses this.props.title to create link for dropbox API

          });

  }

render() {
  return(
    // renders project with files from linked folder
  );

  }


class App extends React.Component {

render(){
return(
  <div className="contentWrapper">
    <Route path="/parent/:projectId?" component={Parent}/>
    <Redirect from="/" to="/parent" />
</div>
    )
  }

}

// ========================================

ReactDOM.render((
  <BrowserRouter>
    <App />
  </BrowserRouter>),
  document.getElementById('root')
);