我正在使用Material-ui的Tabs,它们受到控制,我将它们用于(React-router)链接,如下所示:
<Tab value={0} label="dashboard" containerElement={<Link to="/dashboard/home"/>}/>
<Tab value={1} label="users" containerElement={<Link to="/dashboard/users"/>} />
<Tab value={2} label="data" containerElement={<Link to="/dashboard/data"/>} />
Run Code Online (Sandbox Code Playgroud)
如果我当前正在访问仪表板/数据并点击浏览器的后退按钮,我会(例如)转到仪表板/用户,但突出显示的选项卡仍然停留在仪表板/数据上(值= 2)
我可以通过设置状态来改变,但是当按下浏览器的后退按钮时我不知道如何处理事件?
我发现了这个:
window.onpopstate = this.onBackButtonEvent;
Run Code Online (Sandbox Code Playgroud)
但每次状态改变时都会调用此命令(不仅仅是在后退按钮事件中)
目前我的主要功能,服务器启动的地方看起来像这样
#[actix_rt::main]
async fn main() -> std::io::Result<()> {
let address = "0.0.0.0:3000";
HttpServer::new(move || {
let app_state = {...some state};
App::new()
.data(app_state)
.wrap(middleware::Logger::default())
.service(network_api::init_service())
})
.bind(address)?
.run()
.await
}
Run Code Online (Sandbox Code Playgroud)
服务器启动后,我想运行一个(异步)函数,以向另一台服务器发出请求,并且该服务器应该向刚刚启动并运行的该服务器发出另一个请求。
不确定我在文档中是否看到任何提及仅在服务器启动时运行一次的回调函数的内容。
例如,也许让它run()
发挥作用,像这样:
run(|| {
// server started now perform some request or whatever
Client::new().post(&url).json(json_stuff).send().await
})
Run Code Online (Sandbox Code Playgroud)
编辑 我想我已经解决了,当我可以回答我自己的问题时会发布答案
我有这样的拦截器
axios.interceptors.response.use(undefined, err=> {
const error = err.response;
console.log(error);
if (error.status===401 && error.config && !error.config.__isRetryRequest) {
return axios.post(Config.oauthUrl + '/token', 'grant_type=refresh_token&refresh_token='+refreshToken,
{ headers: {
'Authorization': 'Basic ' + btoa(Config.clientId + ':' + Config.clientSecret),
'Content-Type': 'application/x-www-form-urlencoded,charset=UTF-8'
}
})
.then(response => {
saveTokens(response.data)
error.config.__isRetryRequest = true;
return axios(error.config)
})
}
})
Run Code Online (Sandbox Code Playgroud)
一切正常,但如果我在我的情况下喜欢在一个React组件上进行4次API调用,并且发生此错误,则相同的代码将运行4次,这意味着4次我将发送刷新令牌并获取身份验证令牌,并且我希望显然只运行一次
我使用Material-UI创建了一个可选组件
let SelectableInfiniteList = makeSelectable(Infinite);
Run Code Online (Sandbox Code Playgroud)
并将ListItem放入其中,现在我想更改所选项目的默认灰色,但我不知道如何给它一个className
<ListItem className="list-item" primaryText={i}/>
Run Code Online (Sandbox Code Playgroud)
并使用list-item:焦点选择器我可以改变背景颜色,只要它被聚焦(但是如果我点击应用程序中的其他地方)焦点会丢失并且灰色会显示在(仍然)所选项目上,
有没有办法改变选定的项目背景颜色?
我正在使用最新的React和React Router版本构建一个Web应用程序,在我的情况下,我的应用程序支持多种语言,并且由于建立了索引,因此每种语言都有单独的html文件。因此,对于像myapp.com这样的网址,
myapp.com/en/-英文
myapp.com/de/-适用于德语等...
在服务器端,每个/ en /文件夹当然都有自己的index.html文件,其中包含以给定语言编写的meta,title和其他元数据,并且它们都可以进入我们的React应用程序(bundle.js)
我以前已经使用Router Hash History构建了类似的东西,所以我的应用程序看起来像myapp.com/en/#/home,而我在route.js中的主要路由当然是这样的
<Route path="/" component={MainComponent}
Run Code Online (Sandbox Code Playgroud)
现在,我要使用BrowserRouter,并且如果URL为myapp.com/en/ ,则我的路由应如下所示:
<Link to="/home" />
Run Code Online (Sandbox Code Playgroud)
单击后,将带您到myapp.com/en/home,它将正确呈现在Route中与其链接的组件
<Route path="/home" exact component={HomeContainer} />
Run Code Online (Sandbox Code Playgroud)
基本上目前这只有在我做了这样的事情时才有效
<Link to=`/${getCurrentLanguage()}/home` /
Run Code Online (Sandbox Code Playgroud)
路线是这样的
<Route path=`/${getCurrentLanguage()}/home` exact component={HomeContainer} />
Run Code Online (Sandbox Code Playgroud)
这当然是最疯狂的
我如何才能达到预期的行为?或者您有其他不同的想法吗?谢谢
编辑我没有问任何关于React翻译的问题,我将使用i18next来翻译React方面,我问的是使用不同index.html文件进行路由的问题
javascript ×4
reactjs ×4
material-ui ×2
actix-web ×1
asynchronous ×1
axios ×1
promise ×1
react-router ×1
rust ×1
rust-actix ×1