Question

您好我正在使用反应路由器并且有一点问题。由于某种原因，网址是堆叠的。 IE：/ blog / show / blog / edit / blog / show 它仅在我的博客上显示或编辑时发生。如果我点击任何其他链接，网址将自行修复IE：/ resume 我的反应路由器代码是：

<Router history={browserHistory}>
    <Route path="/" component={Layout}>
        <IndexRoute component={About} />
        <Route path="projects" component={Projects}>
            <Route path="calculator" component={Calculator} />
            <Route path="stopwatch" component={Timer} />
            <Route path="todo" component={Todo} />
            <Route path="clock" component={Clock} />
        </Route>
        <Route path="resume" component={Resume} />
        <Route path="contact" component={Contact} />
        <Route path="login" component={Login} />
        <Route path="logout" component={Logout} />
        <Route path="blog" component={Blog}>
            <Route path="show/:id" component={ShowPost} />
        </Route>
        <Route path="/api/edit/:id" component={EditPost} />
        <Redirect from="*" to="/" />
    </Route>
</Router>

将我/博客链接到/ blog / edit和/ blog / show

的代码

 <Link to={`blog/show/${post.id}`} className="card-footer-item">View</Link>

    { auth ? <Link to={`api/edit/${post.id}`} className="card-footer item">
                Edit
             </Link>
    : null }

Answer 1

当navigatinb时，React Router不支持相对位置。您需要将to道具传递给<Link>绝对值。

如果您需要根据当前位置创建路径名，则<Route>呈现的组件会将当前位置作为道具注入，因此您可以将其作为this.props.location.pathname进行访问。

反应路由器堆叠网址

1 个答案: