时间戳

首页 > 解决方案 > React.js 自动重定向路由

reactjs - React.js 自动重定向路由

问题描述

我的代码中有这段代码index.js：

const routing = (
<Router>
    <div>
        <Route path='/'>
            <Redirect to="/login" />
        </Route>
        <Route path="/login" component={Login} />
        <Route path="/signin" component={Signin} />
        <Route path="/home" component={Home} />
    </div>
</Router>
)

所以它应该给我的是，每当我启动它时，它应该降落在它上面http://localhost:3000/login或类似的地方。它能做什么。

它给了我一个登录屏幕，如果我点击登录按钮，它会带我到http://localhost:3000/home，这也是我想要的。

但是每当我直接尝试访问http://localhost:3000/home或http://localhost:3000/signin时，它总是需要我访问http://localhost:3000/login。

这里的实际问题是什么？如何解决？

标签： reactjsreact-router

解决方案

您需要在exact您的路由中添加关键字，以根据 URL 指定具体的路由路径，否则将遵循继承线。例如，如果您访问 URL /，它将按预期加载登录组件，因为这是第一条路由。但是，如果您访问 URL /home，它将呈现登录组件，因为它包含路径/。添加exact关键字意味着只有 URL/会到达该路由。任何其他路由，即使它们包含/（即每条路由）也不会呈现该组件，因为/它与/anything.

const routing = (
<Router>
    <Switch>
        <Route exact path='/'>
            <Redirect to="/login" />
        </Route>
        <Route path="/login" component={Login} />
        <Route path="/signin" component={Signin} />
        <Route path="/home" component={Home} />
    </Switch>
</Router>
)

推荐阅读