我有以下Router
定义:
<Router>
<Route exact path='/' component={Home}/>
<Route path='/about' component={About}/>
<Route path='/code' component={Code}/>
</Router>
我希望任何未映射的路由(即/foo
)重定向回到根/
。
我尝试<Redirect .../>
失败。另外添加<Route />
而不添加path=
会导致每个页面上的组件重复。
答案 0 :(得分:1)
只需在底部这样放置重定向,然后用Switch
包裹您的路线即可:
<Router>
<Switch>
<Route exact path='/' component={Home}/>
<Route path='/about' component={About}/>
<Route path='/code' component={Code}/>
// Redirect all 404's to home
<Redirect to='/' />
</Switch>
</Router>
答案 1 :(得分:1)
<Router>
<Switch>
// ...your routes and then
<Route path="*" render={() => <Redirect to="/" />}
</Switch>
</Router>
答案 2 :(得分:1)
您需要在<Switch>
组件中进行操作。
// IMPORT
import {
BrowserRouter as Router,
Route,
Link,
Switch,
Redirect
} from "react-router-dom";
----------
// USAGE
<Switch>
<Route path="/" exact component={Home} />
<Redirect from="/old-match" to="/will-match" />
<Route path="/will-match" component={WillMatch} />
<Route component={NoMatch} />
</Switch>
从React Router Docs中可以看到。
切换
呈现与位置匹配的第一个孩子
<Route>
或<Redirect>
。与仅使用一堆s有何不同?
<Switch>
的独特之处在于它专门呈现一条路由。相反,与位置匹配的每个<Route>
都进行包含性渲染。考虑以下代码:<Route path="/about" component={About}/> <Route path="/:user" component={User}/> <Route component={NoMatch}/>
如果URL是/ about,则
<About>
,<User>
和<NoMatch>
将全部呈现,因为它们都与路径匹配。这是设计使然,允许我们以多种方式将<Route>
组合到我们的应用中,例如边栏和面包屑,引导程序标签等。但是,有时我们只选择一个
<Route>
进行渲染。如果我们位于/ about,我们不想同时匹配/:user(或显示“ 404”页面)。使用Switch的方法如下:import { Switch, Route } from 'react-router' <Switch> <Route exact path="/" component={Home}/> <Route path="/about" component={About}/> <Route path="/:user" component={User}/> <Route component={NoMatch}/> </Switch>
答案 3 :(得分:0)
请在所有Routes
的底部添加一条默认路由(添加from
属性以进行重定向)
<Router>
<Route exact path='/' component={Home}/>
<Route path='/about' component={About}/>
<Route path='/code' component={Code}/>
<Redirect from="/" />
</Router>