React路由器：重置路由更改（可訪問性）

我試圖改進我現有的應用程序的可訪問性，我注意到當我的路線更改瀏覽器焦點保持不變。我的期望是重點放在頁面的第一個元素上，以便我可以利用跳轉鏈接和類似的東西。React路由器：重置路由更改（可訪問性）

問題：有沒有辦法使用react-router來重置瀏覽器焦點（模擬頁面刷新）？

更新1：

我嘗試添加document.activeElement.blur()這似乎有所幫助，但在Chrome中工作。

更新2：

其實即使除去document.activeElement.blur()後，它似乎在Safari中工作。我不知道這是否與browserHistory東西從react-router

來源

2016-06-22 Alan Souza

讓你找到如何調用JS的路由器導航？ –

我做過，我一直在使用'onUpdate'做其他事情。 –

我結束了去爲是更新我的反應容器有tabindex="-1"，並呼籲document.getElementById('content').focus()內onUpdate的解決方案。這對我來說就像是黑客攻擊，所以我不確定這是否是正確的解決方案。

的index.html

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta charset="UTF-8"> 
    <title>Todo App</title> 
    <meta name="description" content="" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> 
    <meta name="mobile-web-app-capable" content="yes"> 
</head> 
<body> 
    <div id="content" tabindex="-1" /> 
    <script src="index.js"></script> 
</body> 
</html>

index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Router, browserHistory } from 'react-router'; 

import routes from './routes'; 

let element = document.getElementById('content'); 
ReactDOM.render(<Router onUpdate={() => document.getElementById('content').focus()} 
    history={browserHistory} routes={routes} />, element);

來源

2016-06-22 01:57:38

你破解了2個部分。 1）tabindex爲-1。這不是一件壞事，你總是會把它放在一個通常無法集中的地方（一個不是按鈕，鏈接等的元素）。 2）將焦點集中在React應用程序內部的外部元素上。你可能會認爲這確實有點骯髒。你可以通過調用'element.focus（）'來減少它，但它仍然是一樣的。或者將你的路由器包裝在另一個jsx元素中，並將焦點放在那個元素上（提示使用'ref'）。 – Tieme

React路由器：重置路由更改（可訪問性）

回答

相關問題