Question

我的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。

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

Answer 1

您需要在路由中添加关键字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>
)

Answer 2

尝试在exact和<Route path='/'>上使用<Switch>而不是<div>：

import { Switch } from 'react-router-dom';

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>
)

我认为路径的部分匹配会存在问题。当您尝试直接访问http://localhost:3000/home时，路由器中的第一个匹配项是/，它将重定向您登录。</ p>

在exact中使用<Route>时，它将匹配绝对路径。在上面的示例中，仅当您访问http://localhost:3000/

时，您才会被重定向

<Switch>分组并迭代<Router>子元素并呈现第一个匹配项。

在您的情况下（没有<Switch>），它将呈现所有<Routes>。因此可能是触发了重定向。

React.js自动重定向路由

2 个答案: