React js：导入要路由的组件

Question

I have class like this in reactjs

class Topics extends React.Component {

    constructor(props){
        super(props);
        this.state ={
            url:props.match.url,
            path:props.match.path
        }
    }
    render(){

        return (<div>
        <h2>Topic</h2>
        <ul>
          {topics.map(({ name, id }) => (
            <li key={id}>
              <Link to={`${this.state.url}/${id}`}>{name}</Link>
            </li>
          ))}
        </ul>
        <Route path={`${this.state.path}/:topicId`} component={TopicDetails}/>
      </div>)

    }
}

I am trying to load TopicDetails component in a route.The TopicDetails

topicDetails.js

const TopicDetails = ({match}) => {
    const topic = topics.find(({ id }) => id === match.params.topicId);

    return (<div>
        <h2>Details</h2>
        <h2>{topic.name}</h2>
      <p>{topic.description}</p>

      </div>
      )

    }


export default TopicDetails;  

My question is how can properly add the component which is imported??

Answer 1

Since you are exporting TopicDetails as default export you can import it like

import TopicDetails from './TopicDetails'; //here specify the correct path of TopicDetails functional component

Complete code is here

import TopicDetails from './TopicDetails';
class Topics extends React.Component {

    constructor(props){
        super(props);
        this.state ={
            url:props.match.url,
            path:props.match.path
        }
    }
    render(){

        return (<div>
        <h2>Topic</h2>
        <ul>
          {topics.map(({ name, id }) => (
            <li key={id}>
              <Link to={`${this.state.url}/${id}`}>{name}</Link>
            </li>
          ))}
        </ul>
        <Route path={`${this.state.path}/:topicId`} component={TopicDetails}/>
      </div>)

    }
}