Question

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

const routing = (
<Router>
    <Switch>
        <Route exact path="/">
            <Redirect to="/a" />
        </Route>
        <Route path="/a" component={A} />
        <Route path="/b" component={B} />
        <Route path="/c" component={C} />
    </Switch>
</Router>
)

它直接降落在/a上，我也可以去/b和/c。

如果我尝试转到“ /某物”，则该内容什么也不会呈现，因为该路径的组件未定义。

我想要实现的是，我不想授予对“ / something”的访问权限，尽管它什么也没有提供，但是什么也没有提供。 我希望有人尝试访问“ /某物”，他会自动重定向到“ /默认”。

有可能吗？

Answer 1

是的，这就是<Switch>的目的。 Switch会精确地渲染其子节点之一。您可以这样做：

const routing = (
<Router>
    <Switch>
        <Route exact path="/">
            <Redirect to="/a" />
        </Route>
        <Route path="/a" component={A} />
        <Route path="/b" component={B} />
        <Route path="/c" component={C} />
        <Route render={
            ()=>(<Redirect to="/a"/>)}
        />
    </Switch>
</Router>
)

最后一条路由没有路径，因此它将匹配每个url。但是，由于切换，如果其他任何路由匹配，则将不会呈现。

Answer 2

通配符可用于匹配任何路由，请查看以下示例：

const routing = (
    <Router>
        <Switch>
            <Route exact path="/">
                <Redirect to="/a"/>
            </Route>
            <Route exact path="/a" component={A}/>
            <Route exact path="/b" component={B}/>
            <Route exact path="/c" component={C}/>

            <Route path="*">
                <Redirect to="/a"/>
            </Route>
        </Switch>
    </Router>
)

react.js设置默认路由

2 个答案: