React 如何重定向主页？

Question

我的问题是我有这样的路线但是当我尝试例如 http://localhost:3000/examp1 我只想重定向到主页当我写一些东西时我怎么能这样做 http://localhost:3000/** * 我转到页面但没有显示我如何检测以及如何重定向主页？ 有人帮忙吗？

      <Router>
          <Switch>
            <Route path='/' component={Home} exact />
            <Route path='/xyz' component={asf} exact />
            <Route path='/asd' component={asd} exact />
            <Route path='/fasd/:slug' component={asd} exact />
            <Route path='/asd' component={asd} exact />
            <Route path='/asd/:slug' component={asd} exact />
            <Route path='/asd' component={asd} exact />
            <Route path='/asd' component={fas} exact />
            <Route path='/asd' component={fasd} exact />


          </Switch>
      </Router>

Answer 1

在<Switch>标记内添加<Route />没有path属性的底部应该适用于没有匹配项的情况，然后使用<Redirect />标记重定向到主页。

<Router>
    <Switch>
        <Route path='/' component={Home} exact />
        <Route path='/xyz' component={asf} exact />
        <Route path='/asd' component={asd} exact />
        <Route path='/fasd/:slug' component={asd} exact />
        <Route path='/asd' component={asd} exact />
        <Route path='/asd/:slug' component={asd} exact />
        <Route path='/asd' component={asd} exact />
        <Route path='/asd' component={fas} exact />
        <Route path='/asd' component={fasd} exact />

        <Route component={() => <Redirect to="/" />} />
    </Switch>
</Router>

如何使用 React-Router 在 React 中正确呈现 404 页面？

https://reactrouter.com/web/api/Redirect

Answer 2

您可以简单地使用 react-router-dom 库的 Redirect 组件。

<Router>
    <Switch>
        <Route path='/' component={Home} exact />
        <Route path='/xyz' component={asf} exact />
        <Route path='/asd' component={asd} exact />
        <Route path='/fasd/:slug' component={asd} />
        <Route path='/asd' component={asd} exact />
        <Route path='/asd/:slug' component={asd} />
        <Redirect to="/" />
    </Switch>
</Router>

Answer 3

react-router 1.0.0 中删除了 DefaultRoute 和 NotFoundRoute。

我想强调的是，带有星号的默认路由必须位于当前层次结构级别中的最后一个才能工作。 否则它将覆盖树中出现在它之后的所有其他路由，因为它是第一个并且匹配每个路径。

对于 react-router 1、2 和 3

如果要显示 404 并保留路径（与 NotFoundRoute 功能相同）

 <Route path='*' exact={true} component={My404Component} />

如果要显示 404 页面但更改 url（与 DefaultRoute 功能相同）

 <Route path='/404' component={My404Component} /> <Redirect from='*' to='/404' />

具有多个级别的示例：

 <Route path='/' component={Layout} /> <IndexRoute component={MyComponent} /> <Route path='/users' component={MyComponent}> <Route path='user/:id' component={MyComponent} /> <Route path='*' component={UsersNotFound} /> </Route> <Route path='/settings' component={MyComponent} /> <Route path='*' exact={true} component={GenericNotFound} /> </Route>

对于 react-router 4 和 5

保持路径

 <Switch> <Route exact path="/users" component={MyComponent} /> <Route component={GenericNotFound} /> </Switch>

重定向到另一条路线（更改网址）

 <Switch> <Route path="/users" component={MyComponent} /> <Route path="/404" component={GenericNotFound} /> <Redirect to="/404" /> </Switch>

顺序很重要！

Answer 4

我可能会使用Navigate从“/”重定向到“/home”

import {BrowserRouter, Navigate, Route, Routes,} from "react-router-dom";


  <BrowserRouter>
      <Routes>
         <Route exact path="/" element={<Navigate to="/home"/>} />
      </Routes>
  </BrowserRouter>