Javascript ReactQuery React Router V5 将状态变量从 api 响应插入到路由中，但仅在响应完成时

发布于08月06日

在我的应用程序中，我有一个API调用，它获取一些数据(对象数组)，然后我在上下文中使用它，并在我的应用程序中共享它.我想要做的是使用一些数据，即对象值，并将其作为我的路由的前缀.API处理是通过Reaction-Query完成的.

我try 只访问该变量并按如下方式插入它:

const Routing: React.FunctionComponent = () => {
  const { valueFromContext } = React.useContext(DataContext);

  const basePrefix = valueFromContext?.name;

  return (
    <>
        <BrowserRouter >
          <Header />
          <div className="App">
            <Switch>
              <Route exact path={["/", "/dashboard"]}>
                <Redirect to={`/${basePrefix}/home`} />
              </Route>
              <Route exact path={[`/${basePrefix}/home`, "/"]} component={Home} />
              <Route exact path={`/account/:id`} render={(props: RouteComponentProps<any>) => <Account {...props} />} />
              <Route component={NotFound} />
            </Switch>
          </div>
        </BrowserRouter>
    </>
  )
}

所以问题是这是不一致的，因为有时url返回为‘/unfined/home’并且显示404Not Found组件，所以我认为在响应完成之前就插入了路由？

你有什么 idea 吗？

const Routing: React.FunctionComponent = () => { const { valueFromContext } = React.useContext(DataContext); const basePrefix = valueFromContext?.name; return basePrefix ? ( <BrowserRouter > <Header /> <div className="App"> <Switch> <Route exact path={["/", "/dashboard"]}> <Redirect to={`/${basePrefix}/home`} /> </Route> <Route exact path={[`/${basePrefix}/home`, "/"]} component={Home} /> <Route exact path={`/account/:id`} render={(props: RouteComponentProps<any>) => <Account {...props} />} /> <Route component={NotFound} /> </Switch> </div> </BrowserRouter> ) : null; // <-- or loading indicator/spinner/etc }

Javascript ReactQuery React Router V5 将状态变量从 api 响应插入到路由中，但仅在响应完成时

推荐答案

Javascript相关问答推荐

微软Edge Select 间隙鼠标退出问题

我应该在redux reducer中调用其他reducer函数吗？

zoom svg以适应圆

按钮未放置在html dis位置

传递一个大对象以在Express布局中呈现

网页自检测外部元素无法加载

Exceljs：我们在file.xlsx(...)&#中发现了一个问题'"" 39人；

使搜索栏更改语言

D3 Scale在v6中工作，但在v7中不工作

如何在Obsidian dataview中创建进度条

colored颜色检测JS，平均图像 colored颜色检测JS

如何在ASP.NET JavaScript中使用Google Charts API仅对绘制为负方向的条形图移动堆叠条形图标签位置

使用POST请求时，Req.Body为空

为什么我的自定义元素没有被垃圾回收？

DOM不自动更新，尽管运行倒计时TS，JS

将范围 Select 器添加到HighChart面积图

使用可配置项目创建网格

我想为我的Reaction项目在画布上加载图像/视频，图像正在工作，但视频没有

MUI-TABLE：MUI表组件中交替行的不同 colored颜色不起作用

在采购unpept-visalizations.js时遇到问题