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>