React js：将组件导入路由

Question

我在 reactjs 中有 class 这样的

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

    }
}

我正在尝试在 route.The TopicDetails

中加载 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;

我的问题是如何正确添加导入的组件？？

Answer 1

由于您将 TopicDetails 导出为默认导出，因此您可以像这样导入它

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

完整代码在这里

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

    }
}

React js：将组件导入路由

React js : import component to route

javascript

reactjs

react-router-v4