不更新浏览器网址,javascript,reactjs,react-router,react-router-dom"/>
时间戳

首页 > 解决方案 > 反应路由器：不更新浏览器网址

javascript - 反应路由器：不更新浏览器网址

问题描述

我正在学习 React 制作一个小型单页应用程序。今天刚刚添加了 react-router-dom 并将其构建为路由和私有路由。一切都很好，除了一件事：当用户在浏览器栏中输入格式错误的 url 时，用户应该被重新路由到索引（WORKS！），但浏览器 url 栏不会在此重定向上更新。奇怪的是，当我在未经授权的情况下访问私有路由时，重定向确实会更新 url 栏。我错过了什么？

路由器.js：

const PrivateRoute = ({auth: authenticated, component: Component, ...rest}) => (
    <Route {...rest} render={(props) => (
        authenticated === true
            ? <Component {...props} />
            : <Redirect to='/login/'/>
    )}/>
);

export default function Router() {

    const auth = useSelector(isAuthenticated);

    return (
        <Switch>
            <PrivateRoute auth={"auth"} path={"/dashboard/"} component={DashboardContainer}/>
            <Route path={"/about/"} component={AboutContainer}/>
            <Route path={"/login/"} component={LoginContainer}/>
            <Route path={"/terms/"} component={TermsContainer}/>
            <Route path={"/"} component={IndexContainer}/>
            <Redirect push to={"/"}/>
        </Switch>
    );
}

标签： javascriptreactjsreact-routerreact-router-dom

解决方案

我相信您的问题是由于未指定路径应该exact匹配，因此任何路由都将与您指定为的路由匹配：

<Route path={"/"} component={IndexContainer}/>

尝试将exact道具添加到您的所有路由（重定向除外），您应该正确地重定向到具有正确 URL 的主页。

此处有关确切道具的更多详细信息：React：<Route exact path="/" /> 和 <Route path="/" /> 之间的区别

推荐阅读