Question

我很反应，最近建立了自己的投资组合网站。但是，我在发布路由时发现了一个问题。这是我的路由器：

 <Switch>
     <Route exact path='/project' component={ProjectDefault}/>
     <Route path='/project/:id' component={ProjectDetail}/>
 </Switch>

这是我的ProjectDetail组件：

export const ProjectDetail = (props) => {
    return (
        <div className="project-detail w3-animate-zoom">
            <div className="col-lg-12 project-detail-header">
                <h2 className="name text-white">{project.name}</h2>
                <hr className="split-line"/>
                <h4 className="skills text-white"
                             {project.description}</h4>
                <h4 className="skills text-black">Developed With</h4>
                <h4 className="skills text-white">{project.tech}</h4>
            </div>
        </div>

    )
}

到目前为止工作正常，但是，当我尝试将ProjectDetail组件更改为：

export class ProjectDetail extends React.Component {
        constructor(){super();...//setting state}
        render() {
            return (
            <div className="project-detail w3-animate-zoom">
                <div className="col-lg-12 project-detail-header">
                    <h2 className="name text-white">
   {this.state.project.name}</h2>
                    <hr className="split-line"/>
                    <h4 className="skills text-white">
   {this.state.project.description}</h4>
                    <h4 className="skills text-black">Developed 
   With</h4>
                    <h4 className="skills text-white">
   {this.state.project.tech}</h4>
                </div>
            </div>

        )
}

路由器无法正常工作，只有第一次点击才会路由到我的页面。任何人都可以向我解释为什么会发生这种情况？

反应路由问题

0 个答案: