kandi background
kandi background
Explore Kits
kandi background
Explore Kits
This is related to REST API

Popular New Releases in REST

0.75.2

Release v2.0.2

修复 沙箱 提权问题

v4.5.12

json-server

fastapi

0.75.2

beego

Release v2.0.2

yapi

修复 沙箱 提权问题

NeteaseCloudMusicApi

v4.5.12

Popular Libraries in REST

Trending New libraries in REST

Top Authors in REST

1

66 Libraries

5638

2

65 Libraries

36172

3

51 Libraries

5355

4

50 Libraries

482

5

42 Libraries

2749

6

37 Libraries

4002

7

36 Libraries

17415

8

34 Libraries

1688

9

30 Libraries

190

10

28 Libraries

6785

1

66 Libraries

5638

2

65 Libraries

36172

3

51 Libraries

5355

4

50 Libraries

482

5

42 Libraries

2749

6

37 Libraries

4002

7

36 Libraries

17415

8

34 Libraries

1688

9

30 Libraries

190

10

28 Libraries

6785

Trending Kits in REST

No Trending Kits are available at this moment for REST

Trending Discussions on REST

    How to redirect in React Router v6?
    Is every "complete" object a "most-derived" object?
    Filter out everything before a condition is met, keep all elements after
    "Configuring the trigger failed, edit and save the pipeline again" with no noticeable error and no further details
    Multiple labels per item on Kendo chart
    Python 3.10 pattern matching (PEP 634) - wildcard in string
    Redirect in react-router-dom V6
    Patch request not patching - 403 returned - django rest framework
    Haskell: Can I read integers directly into an array?
    Typescript: deep keyof of a nested object, with related type

QUESTION

How to redirect in React Router v6?

Asked 2022-Mar-24 at 17:22

I am trying to upgrade to React Router v6 (react-router-dom 6.0.1).

Here is my updated code:

1import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
2
3<BrowserRouter>
4  <Routes>
5    <Route path="/" element={<Home />} />
6    <Route path="/lab" element={<Lab />} />
7    <Route render={() => <Navigate to="/" />} />
8  </Routes>
9</BrowserRouter>
10

The last Route is redirecting the rest of paths to /.

However, I got an error

TS2322: Type '{ render: () => Element; }' is not assignable to type 'IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)'.   Property 'render' does not exist on type 'IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)'.

However, based on the doc, it does have render for Route. How to use it correctly?

ANSWER

Answered 2022-Mar-18 at 18:41

I think you should use the no match route approach.

Check this in the documentation.

https://reactrouter.com/docs/en/v6/getting-started/tutorial#adding-a-no-match-route

copy icondownload icon

1import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
2
3<BrowserRouter>
4  <Routes>
5    <Route path="/" element={<Home />} />
6    <Route path="/lab" element={<Lab />} />
7    <Route render={() => <Navigate to="/" />} />
8  </Routes>
9</BrowserRouter>
10import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
11
12<BrowserRouter>
13  <Routes>
14    <Route path="/" element={<Home />} />
15    <Route path="/lab" element={<Lab />} />
16    <Route
17        path="*"
18        element={<Navigate to="/" replace />}
19    />
20  </Routes>
21</BrowserRouter>
22

Update - 18/03/2022

To keep the history clean, you should set replace prop. This will avoid extra redirects after the user click back. Thanks @Paul for this tip.

Source https://stackoverflow.com/questions/69868956