Question

我正在使用React创建一个简单的文件导航UI。我的路线设置如下：

    <Switch>
      <Route exact path='/app/file/' component={Files}/>
      <Route path='/app/file/:id' component={FilesNav}/>
    </Switch>

在Files和FilesNav组件中，我都有以下代码段：

现在，当我从Link to组件点击此Files路径时，它将为我成功呈现FilesNav组件。但是，由于它是一个文件系统，并且会有嵌套的文件夹，因此我还需要从/app/file/:id组件本身中访问FilesNav路径，这是它不起作用的地方。它会使用正确的ID更新查询参数，但不会再次为我呈现FilesNav组件，我假设这是因为我正在尝试呈现已经存在于其中的组件？有人可以给我一个解决方法吗？

有关更多上下文，以下是FilesNav的代码：

class FilesNav extends Component{


    componentDidMount(){
        const { id } = this.props.match.params
        this.props.showContents(id)
    }

    upload = value => {
        const { id } = this.props.match.params;
        const file = value.file
        this.props.uploadFile(file, id)
    }

    render(){
        return(
            <div>
                <h3>Files</h3>
                <div>
                <List
                    bordered
                    dataSource={this.props.folderContents}
                    renderItem={item => (<List.Item><Link to = {`/app/file/${item.id}`} key = {item.id}>{item.name}</Link></List.Item>)}
                />
                </div>
                <span>
                    <Upload className='upload-button' customRequest={this.upload} showUploadList={false}>
                    <Button><FontAwesomeIcon icon='upload' />Upload</Button>
                    </Upload>
                </span>
            </div>
        );
    }
}

function mapStateToProps({...}){
    return{
        ...  
    }
}

export default connect(mapStateToProps ,{ uploadFile, showContents })(FilesNav);

编辑：为FilesNav添加了代码

无法路由到React中的相同组件

0 个答案: