根据事件目标数据ReactJS动态更改模式窗口的url

问题描述

我将尽力解释我要实现的目标以及当前的目标。我正在尝试打开一个模式窗口，该模式窗口根据触发事件的元素的项目名称来动态更新url，以打开模式窗口。

例如我将位于“ myapp.com/folders”，单击后，我想打开一个URL为“ myapp.com/folder/current-project-name”的模式窗口

我很确定我可以用React Router做到这一点，但我有点迷茫。

我认为我必须在我的App.js中的设置中声明Route，但问题是项目名称的变量位于其他组件（“ Folders.js”）中

我将分享一些代码，如果您需要更大的代码段来帮助我，请告诉我：

我当前的App.js：

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Navigation />
        <Switch>
          <Route path="/" component={Home} exact />
          <Route path="/folders" component={Folders} />
        </Switch>
      </div>
    </BrowserRouter>
  );
}

export default App;

Folders.js中发生的事情是我根据从Google Cloud Firestore得到的响应来映射元素。我要实现的目标是，一旦单击了地图中的任何元素，也将动态更新模态窗口的内容和网址。

查看Folders.js的代码段以及我如何在此处进行路由：

 {/* Projects */}
  <Section justifyContent="center" margin="56px 0 56px 0">
    {!!response.length && (
      /* Project Item */
      <Container width="1080px">
        {response.map(
          ({ organization,organization_avatar,projects,id }) => (
            <Container
              justifyContent="flex-start"
              justifyContent="space-between"
              margin="0 0 40px 0"
              key={id}
            >
              <Organization>
                <Avatar src={organization_avatar} />
                {organization}
              </Organization>
              {projects &&
                projects.map(
                  ({ project_year,project_name,thumbnail,images }) => (
                    <Project
                      label={project_name}
                      year={project_year}
                      thumbnail={thumbnail}
                      to={`${props.match.url}/${project_name}`}
                      onClick={() => {
                        setTarget([
                          {
                            organization: organization,organization_avatar: organization_avatar,project_name: project_name,project_year: project_year,images: images,},]);
                        setModalOpen(true);
                      }}
                    />
                  )
                )}
            </Container>
          )
        )}
      </Container>
    )}
  </Section>

  {/* Project Detail Overlay */}
  {modalOpen ? (
    <Route path={`${props.match.url}/${project_name}`}>
    <ProjectModal
      projectName={target[0].project_name}
      organization={target[0].organization}
      avatar={target[0].organization_avatar}
      client="Pytajsa.sk"
      selectedImg={target[0].images[0]}
      gallery={target[0].images}
      onClose={() => setModalOpen(false)}
    />
    </Route>
  ) : null}
</div>

）; }

我知道我的代码目前还不合适，但是我也完全迷失了。请帮忙。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）