0

I required to redirect from parent path to child path as a default. but the route is getting updates. but the component is not rendering.

here is my route details:

Lazy part:

const UK = React.lazy(() => import("./components/page-projects/project-uk/project-uk.component"));
const FR = React.lazy(() => import("./components/page-projects/project-france/project-france.component"));
const LT = React.lazy(() => import("./components/page-projects/project-lithuania/project-lithuania.component"));

Route path:

 <Redirect from="/projects" to="/projects/united-kingdom">
    <Route path="/projects/united-kingdom" component={UK}></Route>
    <Route path="/projects/france" component={FR}></Route>
    <Route path="/projects/lithuania" component={LT}></Route>
 </Redirect>

what is wrong here? any one help me? my version of react is 17x

user2024080
  • 1
  • 14
  • 56
  • 96
  • Did you import `{BrowserRouter}` or `{Router}` from react-router? – Sinan Yaman Dec 28 '20 at 05:58
  • I did {BrowserRouter as Route} – user2024080 Dec 28 '20 at 05:59
  • Does [this](https://stackoverflow.com/questions/43351752/react-router-changes-url-but-not-view#:~:text=This%20may%20happen%20in%20cases,separate%20component%20from%20the%20Routes.&text=You%20just%20have%20to%20wrap%20the%20components%20inside%20withRouter.) help you then? – Sinan Yaman Dec 28 '20 at 06:00
  • actually which is preferred and why? – user2024080 Dec 28 '20 at 06:01
  • BrowserRouter is the preferred and correct way. Not sure about the exact reason but importing Router doesn't work as expected. I wanted to make sure you did the correct import first – Sinan Yaman Dec 28 '20 at 06:02
  • Yes, I do correct import only. because if i with another answer that works for me. but wondering why my approach not works – user2024080 Dec 28 '20 at 06:05

2 Answers2

0

The other routes don't have to be children of Redirect.

You should be doing something like this

<Switch>
  <Redirect from="/projects" to="/projects/united-kingdom" />
  <Route path="/projects/united-kingdom" component={UK} />
  <Route path="/projects/france" component={FR} />
  <Route path="/projects/lithuania" component={LT} />
</Switch>

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

vatz88
  • 2,422
  • 2
  • 14
  • 25
  • Not required to nested under parent? then how to set common pros to share with children – user2024080 Dec 28 '20 at 05:56
  • I don't get, can you elaborate more which props or how you want to pass them? The route props will be available in all the routes – vatz88 Dec 28 '20 at 06:11
0

The <Switch /> component will only render the first route that matches the path. Once it finds the first route that matches the path, it will not look for any other matches. Not only that, it allows for nested routes to work properly and since the Redirect is a route you should wrap under the Switch component

<Switch>
  <Redirect from="/projects" to="/projects/united-kingdom" />
  <Route path="/projects/united-kingdom" component={UK} />
  <Route path="/projects/france" component={FR} />
  <Route path="/projects/lithuania" component={LT} />
</Switch>
IAMSTR
  • 618
  • 8
  • 12