React.js 设置默认路由

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”，它不会呈现任何内容，因为该路径的组件未定义。

我想要实现的是，我不想授予对“/something”的访问权限，尽管它什么也没有提供，也没有呈现任何内容。我希望如果有人尝试访问“/something”，他会自动重定向到“/default”。

是否可以 ？

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。但是，由于切换的原因，如果任何其他路由匹配，则不会呈现该路由。