根据api更改切换主路径

Question

React(hooks)beginner here，当驱动程序或管理员访问网站时，它是这样的（示例）： App.js：

  <div className="app">
      <Switch>
         <Route path="/a">
          <A />
        </Route>
        <Route path="/c">
          <C />
        </Route>
        <Route path="/b">
          <B />
        </Route>
        <Route path="/">
          <Redirect to="/a" />
        </Route>
      </Switch>
    </div>

如您所见，主路径是这样的： <Route path="/"> <Redirect to="/a" /> </Route>

这是我从 API 中得到的：

{ “id”：“2222”， “名称”：“随机2”， “isAdmin”：是的， “isDriver”：假， “是客户”：假， “公司”： { “id”：“11111”， “名称”：“随机”

} }

我的意思是如何改变主路径，例如如果“isCustomer”：true，那么主路径是< Route path="/"> <Redirect to="/g" /> </Route>

Answer 1

完全未经测试，但我的直觉是：

使用useState 保存默认路由，如果您的 api 调用结果显示它是客户，则更新默认路由。将状态传递给Redirect。

import React, {useState, useEffect } from "react";

...

const [ defaultRoute, setDefaultRoute ] = useState("/a");

...

useEffect( () => {}, [
  ...fetch api stuff...
  
  if(isCustomer()) setDefaultRoute("/g");
]);

...

return (<div className="app">
      <Switch>
         <Route path="/a">
          <A />
        </Route>
        <Route path="/c">
          <C />
        </Route>
        <Route path="/b">
          <B />
        </Route>
        <Route path="/">
          <Redirect to={defaultRoute} />
        </Route>
      </Switch>
    </div>);