React路由器链接don'Don’别那么受欢迎

React-router links don't get visited style

本文关键字：受欢迎 Don 链接 路由器 don React      更新时间：2023-09-26

我有一个用React Router构建的小网站。我注意到只有主页链接才能获得访问过的样式。另一个链接没有访问的风格，即使当你访问它。

https://jsfiddle.net/dfzkavbd/2/

Javascript：

var dom = React.DOM;
var Router = React.createFactory(ReactRouter.Router);
var Link = React.createFactory(ReactRouter.Link);
var NavItem = React.createFactory(React.createClass({
    render: function() {
        var item = {
            marginLeft: "15px",
            marginRight: "15px",
            position: "relative",
            height: "100%",
            display: "flex",
            alignItems: "center"
        };
        return dom.div({ style: item }, this.props.children);
    }
}));
var NavBar = React.createFactory(React.createClass({
    render: function() {
        var navBarStyle = {
            backgroundColor: "black",
            height: "50px",
            display: "flex"
        };
        var innerNavBarStyle = {
            display: "flex",
            alignItems: "center",
            justifyContent: "initial",
            flexGrow: "1",
            color: "#777"
        };
        return dom.div({ style: navBarStyle },
            dom.div({ style: innerNavBarStyle }, 
                this.renderRightSide()
        ));
    },
    renderRightSide: function() {
        var rightStyle = {
            marginLeft: "auto",
            display: "flex",
            height: "100%"
        };
        return dom.div({ style: rightStyle }, 
            NavItem(null, Link({ to: "/Blog" }, "Blog")),
            NavItem(null, Link({ to: "/" }, "Home"))
        );
    }
}));
var Blog = React.createClass({
    render: function() {
        return dom.span(null, "Blog");
    }
});
var App = React.createClass({
    render: function() {
        return dom.div(null,
            NavBar(),
            this.props.children
        );
    }
});
var Home = React.createClass({
    render: function() {
        return dom.span(null, "Home");
    }
});
const routes = {
  component: App,
  childRoutes: [
    { path: 'Blog', component: Blog },
    { path: '/', component: Home }
  ]
};
ReactDOM.render(Router({ routes: routes }), document.getElementById("App"));

HTML:

<html class=""><head>
    <meta charset="UTF-8">
    <script src="https://fb.me/react-with-addons-0.14.3.js"></script>
    <script src="https://fb.me/react-dom-0.14.3.js"></script>
    <script src="https://npmcdn.com/react-router/umd/ReactRouter.min.js"></script>
</head>
<body style="margin: 0px;">
    <div id="App" class="app"></div>
</body></html>

CSS：

.app a:link {
  text-decoration: none;
}
.app a:visited  {
  color: red;
}
.app a:hover {
  color: white;
  text-decoration: underline;
}

如何将我的访问风格应用于所有访问过的链接？

我认为您可以使用classnames包，并在onClick事件处理程序中将已访问链接的类设置为true。不过，这种情况不会在重新加载时持续存在。如果需要，则需要将设置保存到本地存储或其他位置。

相关文章：