fI currently have the following routes defined in my application:
/
/selectSteps
/steps
/steps/alpha
/steps/beta
/steps/charlie
Which could also be visualised like this:
- (home)
- selectSteps
- steps
- alpha
- beta
- charlie
My root component looks like this:
<Route path="/" exact component={Home} />
<Route path="/select-steps" render={() => <StepSelectorContainer />} />
<Route path="/steps" component={StepsContainer} />
My Steps component does this:
steps.map(step => (
<Route
path={fullPathForStep(step.uid)}
key={shortid.generate()}
render={() => <StepContainer step={step} />}
/>
This all works nicely, but I don't want steps to exist as route in its own right. Only its child routes should be visitable. So I'm looking to lose the /steps route to leave my routes as:
/
/selectSteps
/steps/alpha
/steps/beta
/steps/charlie
How should I configure my routes for this? Ideally, hitting /steps would redirect to the first child route.
Actually, it's pretty straightforward...
Use Redirect component to... well, redirect.
<Redirect from="/steps" exact to="/steps/whatever" />
exact prop guarantees you won't be redirected from sub-route.
Edit: after all, Redirect does support exact (or strict) props. No need to wrap in Route. Answer updated to reflect that.
Pedr,
I think that this will solve your problem.
<Route path="/" exact component={Home} />
<Route path="/select-steps" render={() => <StepSelectorContainer />} />
<Route path="/steps" component={StepsComponent} />
And then in your StepsComponent render method, you can do this.
<Switch>
{steps.map(step => (
<Route
path={fullPathForStep(step.uid)}
key={shortid.generate()}
render={() => <StepContainer step={step} />}
/>}
<Redirect from="/steps" exact to="/steps/alpha" />
</Switch>
What this will do is render your steps component because it the route begins with /steps. After that is rendered, then it will render one of the nested routes based off the url. If the url is just "/steps", then it will redirect to the initial route listed here, in this case "/steps/alpa" by rendering the redirect. The Switch will make it so that it only renders one of the routes.
Credit to Andreyco for the redirect code.
I hope this helps.
Related
I'm trying to open a nested Route from within a nav element.
The App itself runs under /app (as such I redirect any non existing URL to /app).
Within the rendered Layout Component inside the /app Route I'm creating the main navigation as well as the Routes which should ultimately be the content. However once I click on Search or View, the URL gets changed to the correct path, but immediately redirects me to the /app it's as if the Routes "search" and "view" themself were non existent.
Minimal Example:
https://codesandbox.io/s/fragrant-field-ygwbf
App.tsx
<BrowserRouter>
<Routes>
<Route path="/app" element={<Layout />} />
<Route path="*" element={<Navigate to="/app" />} />
</Routes>
</BrowserRouter>
Layout.tsx
const Layout = () => {
const navigate = useNavigate();
const handleSearchClick = (e: any) => {
e.preventDefault();
// do some tasks
navigate("inventory/search");
};
const handleViewClick = (e: any) => {
e.preventDefault();
// do some tasks
navigate("inventory/view");
};
return (
<div>
<nav>
<button onClick={handleSearchClick}>Search</button>
<button onClick={handleViewClick}>View</button>
</nav>
<Routes>
<Route path="/users">
<Route path="about" element={<p>example</p>} />
</Route>
<Route path="/inventory">
<Route path="search" element={<Search />} />
<Route path="view" element={<View />} />
</Route>
</Routes>
The content of search / view should now be displayed below the
Buttons
</div>
);
};
Thanks for any advice
The Problem
Take a look at the browser console, it shows you:
You rendered descendant (or called useRoutes()) at "/app" (under ) but the parent route path has no trailing "*". This means if you navigate deeper, the parent won't match anymore and therefore the child routes will never render.
So, the nested routes (deeper navigation according to the documentation) will never render and you cant see the Search and View sub-routes.
update (Thanks to Drew Reese):
in v6 all route paths are always exactly matched, no more path prefix matching like in v4/5. The parent/root paths need to specify the * wildcard so they can now "prefix" match.
The Solution
Please change the parent <Route path="/app"> to <Route path="/app/*">.
So in the App.tsx:
<BrowserRouter>
<Routes>
<Route path="/app/*" element={<Layout />} />
<Route path="*" element={<Navigate to="/app" />} />
</Routes>
</BrowserRouter>
Edit on codesandbox
I'm attempting to setup the following UI based on routes
/things/ - display the list of items (Component A)
/things/new - display the list of items, with a modal form overlay (Component A and Component B)
/things/:slug - display a specific item (Component C)
With this setup:
/things/ would display Component A
/things/new would display Component A AND Component B
/things/:slug would display ONLY Component C
This is all in a nested route - /things. Which means the path from useRouteMatch returns /things
I have tried several combos with Switch, and attempted to use matchPath and useRouteMatch to differentiate /new from /:slug but with no luck. Every attempt results in one of the paths not returning the correct component.
For example:
<Switch>
<Route path="/:slug(exclude "new")" exact component={ComponentC} />
<Route path="/" exact component={ComponentA} />
</Switch>
<Route path="/new" component={ComponentB} />
Another option I've tried with no luck is to use regex on the slug, to match the slug pattern. Let's says the slug pattern is xxx-xxx-xxx-###, then I tried:
<Route path="/:slug((\w*-)*(\d*))" component={ComponentC) />
but this doesn't match the routes for some reason.
I'm thinking I could use location.pathname but this seems like a hack.
Is it possible to match and render routes as described above with standard <Route path="[something]" /> components with this setup?
This is why I love Stack Overflow. Asking the question often leads you to answer it yourself.
I was browsing the React Router docs for info on the regex and discovered the Route path property can accept an array of paths. So I went with this:
const { path } = useRouteMatch()
<Route path={[path, `${path}/new`]} exact component={ThingsList} />
<Switch>
<Route path={`${path}/new`} render={() => <NewThing path={path} />} />
<Route path={`${path}/:slug`} render={() => <Thing path={path} />} />
</Switch>
I am new to React learning , and was trying to build an app using react-router-dom. I was able to implement basic routing when I came across the term 'switch'. Can anyone please explain me with a use-case example where we use switch and what is its use?
Since you are new am going to take a bit more time to explain with examples and also add some few things about it you may want to have handy.
So like Iddler said, Switch is more or less like the "Switch case" condition in any other languages but usually ends with the first match it finds.
<Switch>
<Route path="/home" component={Home} />
<Route path="/about" component="{About} />
</Switch>
That is an example of its most basic use. Switch determines the start and end of the block or condition. Each Route checks for the current path. supposing we were working on "www.test.com". All of "www.test.com" is the root "/". So the Route checks for the path after the root. so if you had "www.test.com/home", "/home" comes after the root so the "Home" component will be loaded in our example above and if you had "www.test.com/about" the "About" component is loaded.
Be mindful that you can use any names. the components and paths do not need to be the same.
There are also cases when you might want to use exact to match an exact path. this is useful when you have similar paths. eg "/shop" and "/shop/shoes". using exact ensures Switch matches exact paths and not just the first.
Eg:
<Switch>
<Route exact path="/shop" component={Shop} />
<Route exact path="shop/shoes" component="{Shoes} />
</Switch>
You can also use <Route... /> without the <Switch>.
Eg:
<Route path="/home" component={Home} />
so unlike direct component loads where you just load a component like <Home /> Routers work with the URLs.
Lastly, the <Route... /> path can take arrays of url to load same component.
Eg:
<Switch>
<Route path={[ "/home", "/dashboard", "/house", /start" ]} component={Home} />
<Route exact path={[ "/about", "/about/management", "/about/branches" ]} component="{About} />
</Switch>
I hope this helps. Let me know if you need clarifications of any sort. :)
UPDATE:
You are not required to write Routers in this same format always. below is another format you could use;
<Router>
<Switch>
<Route path="/home">
<Home />
</Route>
<Route path="/about">
<About />
</Route>
</Switch>
</Router>
There are instances like am in now where you want to be able to handle what shows when a wrong URL is entered. like a 404page. you could use Router without a path. so like a regular switch statement, that becomes your default.
<Switch>
<Route path="/home" component={Home} />
<Route path="/about" component="{About} />
<Route component="{PageNotFound} />
</Switch>
Switch looks through Route's children and renders the first one that matches the current path, once it does it will not look for any other matches.
The Switch component will work much in the same way as the Router component, meaning we will still have nested Route components that need exact paths, etc.
The added functionality of Switch is that it will only render the first matched child. This is really handy when we have nested routes such as the below:
<Switch>
<Route path="/accounts/new" component={AddForm} />
<Route path={`/accounts/:accountId`} component={Profile} />
</Switch>
Say we put the above code in a component — we would see that both {AddForm} and {Profile} would render, since “/accounts/new” could look like either Route to a Router component. Router components render inclusively of all route matches. The Switch component will render exact matches, and only the exact match. This makes it ideal for these nested scenarios.
I am building a web app with different routes.
There is this case where if a user hits any arbitrary route then he gets directed to Login Component. But it only handles case where bad routing happens this way localhost:3000/gvgdvgdvgd.
I have routes such as /home/news. A user may end up hitting /home/news/10 manually which doesn't exist. Similarly there is a route such as coupon and user may end up hitting /coupons/88 without going to coupons first.
How do I handle these issues in my web-app? I handled it for the first case. Here is the routing config.
<Route path="/login" component={LoginLoadable} />
<Route path="/home" component={Home} />
<Route path="/maths" component={Maths} />
<Route
exact
path="/"
render={routeProps => (
<Component1
{...routeProps}
/>
)}
/>
<Route component={LoginLoadable}/>
What about the case where user hits maths/123/1ydhd manually when that doesn't exist?
Wrap your routes in a Switch and add a Route with no path prop that renders your 404 page. If you don't specify a path, it should always render that route. Adding a Switch makes sure only one route will render. Also you will need to add the exact prop to your routes. See:
https://reacttraining.com/react-router/web/api/Route/exact-bool for how it matches sub-routes.
Something like:
<Switch>
<Route path="/login" component={LoginLoadable} />
<Route exact path="/home" component={Home} />
<Route exact path="/maths" component={Maths} />
<Route
exact
path="/"
render={routeProps => (
<Component1
{...routeProps}
/>
)}
/>
<Route component={LoginLoadable}/> // <-- remove this since you render it in '/login'
<Route component={A404Page} // <-- add this
</Switch>
I want to render a <Product> when the user visits /Products/1.
I want to render a <CreateProduct> when the user visits /Products/new.
My router looks like so:
<Route exact path="/Products/new" component={CreateProduct} />
<Route exact path="/Products/:productId" component={Product} />
If the user browses to /Products/new, it matches both routes and results in the Product component throwing errors re: not finding a product with the id new.
I haven't been able to find anything in the react-router documentation to avoid this. I could potentially use this hack, but there has to be a "better" way:
<Route exact path="/Products/new" component={CreateProduct} />
<Route exact path="/Products/:productId" render={renderProduct} />
using a function to render the <Product> route:
const renderProduct = props =>
props.match.params.productId === 'new'
? null
: <Product {...props} />;
Use <Switch />:
<Switch>
<Route exact path="/Products/new" component={CreateProduct} />
<Route exact path="/Products/:productId" component={Product} />
</Switch>
It will try to find the first match.
So /Products/new will match the first route and skip the second.
/Products/1 will match the second.