We Keep Coding

How to remove trailing in url (React) [duplicate]

I would like to understand better how the useNavigate works as I'm not really understanding the pattern.
This is my Routes
<BrowserRouter>
<Routes>
<Route path="/" element={<Homepage />} />
</Routes>
<Routes>
<Route path="/questionaire" element={<Questionaire />} />
<Route path="questionaire/1" element={<Question1 />} />
<Route path="questionaire/2" element={<Question1 />} />
</Routes>
</BrowserRouter>
On the Questionaire page I use navigate("1") and it goes into the path "/questionaire/1" -
Nice!
Now on question1 I want to go into "/questionaire/2":
navigate("2") - leads me into /questionaire/1/2
navigate("/2") - leads me into /2
navigate("questionare/2") - leads me into /questionaire/1/questionaire/2
How do I make an increment so every question just adds ++
How do I go from questionaire/5 into questionaire/2 using navigate?
I'm using navigate in buttons, should I use LINK? with a button nested in it? Why?
EDIT: doesn't necessarily have to increment the value, but just replace the current number with the one I want - ex question/1 to question/2 or from question/5 to question/3

What you are asking about is the fundamental difference between absolute and relative routing. In react-router-dom#6 the only thing that differentiates relative links and routes from absolute links and routes is the leading "/" character.
Absolute links and routes:
Begin with a leading "/" character, i.e. "/root/segment1/segment2"
Replace the entire path
// "/root/segment1"
navigate("/root/otherPath");
// "/root/otherPage"
Relative links and routes:
Do not begin with a leading "/" character, i.e. "segment2"
Append to the current path
// "/root/segment1"
navigate("otherPath");
// "/root/segment1/otherPage"
...
// "/root/segment1"
navigate("../otherPath");
// "/root/otherPage"
I suggest the following route refactor:
All sibling routes can be wrapped and rendered by a single Routes component.
Use layout and index routes to help manage/organize nested routes.
Code
<BrowserRouter>
<Routes>
<Route path="/" element={<Homepage />} />
<Route path="/questionaire">
<Route index element={<Questionaire />} /> // "/questionaire"
<Route path="1" element={<Question1 />} /> // "/questionaire/1"
<Route path="2" element={<Question2 />} /> // "/questionaire/2"
...
<Route path="<N>" element={<QuestionN />} /> // "/questionaire/<N>"
</Route>
</Routes>
</BrowserRouter>
Use absolute paths to navigate from to the parent path or from question to question:
navigate("/questionaire"); // to parent
navigate("/questionaire/1"); // to question #
navigate("/questionaire/2");
navigate("/questionaire/N");
Use relative paths from the parent layout route on path="/questionaire":
navigate(".."); // to parent
navigate("../1"); // to question #
navigate("../2");
navigate("../N");
Notice here that we can use ".." to navigate relatively to the parent route. This is useful to navigate along sibling components.

as i know. (i am noob)
On the Questionaire page I use navigate("1") and it goes into the path "/questionaire/1" - Nice! Now on question1 I want to go into "/questionaire/2": navigate("2") - leads me into /questionaire/1/2
When you use just a number or string, useNav just adding it with / after current path. If you instead of number 2 write 'hi' it navigate you to /hi.
navigate("/2") - leads me into /2.
Its because you wrote absolute path, if before your string in useNav you will add "/", then its meaning "yourhost"+"your string".
example:
Your host is localhost:3000. If you entered '/test' in useNav it will be localhost:3000/test. Or you want add this "/test/2/3" - then it will be localhost:3000/test/2/3.
navigate("questionare/2") - leads me into /questionaire/1/questionaire/2
as i said if you have just string and before it you didnt add /, then its just added after your current path.

Answering you second question:
How do I make an increment so every question just adds ++ How do I go
from questionaire/5 into questionaire/2 using navigate?
navigate("questionare/2") - leads me into
/questionaire/1/questionaire/2
You can do this using absolute path (e.g: '/questionaire/2') or relative path (e.g: '2'), you can either do this using a Link or programmatically using a useNavigate hook.
const navigate = useNavigate()
const handleClick = () => {
navigate('2')
//or
navigate('/questionaire/2')
}
Your current code is using relative path + adding entire path, which leads to duplicated path as you mentioned.

Creating dynamic Link with some text before it

I was building a search engine for custom project.
There I have a search bar from where user can search.
When the user searches, I want the given link to work as it works in case of google
www.google.com/ search? queryRelatedInfo
Notice the search? and then whatever query/parameter/ID
for this I tried something like this in
import React, {Component} from 'react';
import {
BrowserRouter,
Route,
Switch,
Redirect,
} from 'react-router-dom';
import SearchScreen from "./container/searchScreen.js"
import HomeScreen from "./container/home.js";
class route extends Component {
render () {
return (
<BrowserRouter>
<div>
<Switch>
<Route path ="/" exact render ={(props) => <HomeScreen {...props}/>} />
<Route path ="/search?:id" exact render ={(props) => <SearchScreen {...props}/>} />
</Switch>
</div>
</BrowserRouter>
)
}
}
export default route
Notice, <Route path ="/search?:id" above.
Unfortunately this didn't worked out.
I understand that <Route path ="/:id" works but how can i make <Route path ="/search?:id to work i.e how can I make some link like http://localhost:3000/search?9e9e to work

I think this is related with historyApiFallback. That parameter;
(https://webpack.js.org/configuration/dev-server/#devserver-historyapifallback)
When using the HTML5 History API, the index.html page will likely have to be served in place of any 404 responses. devServer.historyApiFallback is disabled by default. Enable it by passing:
module.exports = {
//...
devServer: {
historyApiFallback: true
}
};
Your react app is a single page application. So all path except home path actually is an virtual path, they are not physically exist. The paths must routed to home path. So react-router can manage.

you don't need to put the path like this /search?:id, just put it search
<Route path ="/search" exact render ={(props) => <SearchScreen {...props}/>} />
then inside your SearchScreen component, get the value of search parameter from the URL, check this issue will help.
after the user make search, pass the value like this /search?s=value_here

React router v4 match path if not `/user`

I have a case in react router v4:
<Route path="/:time?/:zone?" component={TimeComponent} />
However I don't want to render that TimeComponent if route is:
/user/userId123
As you can see above, the path matches user as :time and userId123 as :zone.
My goal: I don't want path to match if route contains /user.
I know I can use regex, but how to specify that I dont want to match the path if contains /user?
Looking for help

You can use switch from react router dom like this:
<Switch>
<Route path="/user/:userId?" component={UserComponent} />
<Route path="/:time?/:zone?" component={TimeComponent} />
</Switch>
With this it will match only one route at a time and you 2 param route is at the end. So using this approach you can catch /user route before time component route.
Please try this.

Link renders the first partial match in React Route v4

Using codes below, it only linked to ListComponent when i want to linked to DetailsComponent. If change
Details: route('data/tower/list/item'),
to
Details: route('data/tower/item'),
it can link to DetailsComponent.I don't why and how to fix it ?
const EnumRouter = {
...
List: route('data/tower/list'),
Details: route('data/tower/list/item'),
};
<Switch>
...
//ListComponent
<MainLayout path={EnumRouter.List} component={List} />
//DetailsComponent
<MainLayout path={EnumRouter.Details} component={Details} />
...
</Switch>

That happens because
You are making use of Switch Component, which renders the first route that matches, which is ofCourse correct thing to do.
You have your List Route as 'data/tower/list' and your Details Route as 'data/tower/list/item', however Router doesn't look for a complete match, In your case 'data/tower/list' matches(although not completely but with the initial part) the Details Route and hence even when you try to Route to Details, it routes to List component.
The solution is to make use of the exact attribute for the Route.
From the Documentation:
exact: bool
When true, will only match if the path matches the location.pathname exactly.
**path** **location.pathname** **exact** **matches?**
/one /one/two true no
/one /one/two false yes
Change the code to
<Switch>
...
//ListComponent
<MainLayout exact path={EnumRouter.List} component={List} />
//DetailsComponent
<MainLayout path={EnumRouter.Details} component={Details} />
...
</Switch>

<Switch> component matching null value in react-router-4

I'm trying to migrate to use React Router 4 and having some trouble understanding the logic of the <Switch> component as it's used in the docs to handle a 404 (or unmatched) route.
For my entry JavaScript file, I have the following routes set up.
index.js
<Switch>
<Route path="/login" component={Login} />
<Route path="/forgot-password" component={ForgotPassword} />
<Route path="/email-verification" component={EmailVerification} />
<Route component={App} />
</Switch>
The Login component will check to see if the user is authenticated, and if so, redirect the user to the /dashboard route (via history.replace).
The App component is only accessible when the user is authenticated and it has a similar check to redirect the user to /login if she is not.
In my App component I have more specified routes that I can be sure are only accessible if the user is logged in.
App.js
<Switch>
<Route path="/dashboard" component={Dashboard} />
<Route path="/accounts" component={Account} />
<Authorize permissions={['view-admin']}>
<Route path="/admin" component={Admin} />
</Authorize>
<Route path="/users" component={Users} />
<Route component={NotFound} />
</Switch>
Herein lies my problem. The Authorize component checks against the permissions passed to see if the user has those permissions, if so, it renders the children directly, if not, it returns null from render().
The expected behavior here is that the <Route path="/admin" /> does not render at all when there are insufficient permissions and the <Route component={NotFound} /> component renders.
According to the docs:
A renders the first child that matches. A
with no path always matches.
However, if I go to any route declared after the <Authorize> component, the router is matching to null. This means that, based on the example above, going to /users returns null. Is the expected behavior of react-router to return the first match in a <Switch/> component, even if it's a null value?
How can I provide a "catch-all" route (404) for such a situation without creating a <PrivateRoute> component for each of the many, authenticated routes in App.js? Should a null value really produce a match?

Unfortunately, react-router's Switch component won't work with routes nested inside other components like in your example. If you check the docs for Switch, it says:
All children of a <Switch> should be <Route> or <Redirect> elements.
... so your Authorize component is not actually legal there as a direct child of Switch.
If you have a read through the source code of the Switch component, you'll see that it rather evilly reads the props of each of its children and manually applies react-router's matchPath method on each child's path (or from) prop to determine which one should be rendered.
So, what's happening in your case is Switch iterates through its children until it gets to your Authorize component. It then looks at that component's props, finding neither a path or from prop, and calls matchPath on an undefined path. As you note yourself, "a <Route> with no path always matches", so matchPath returns true, and Switch renders your Authorize component (ignoring any subsequent Routes or Redirects, since it believes it found a match). The nested '/admin' route inside your Authorize component doesn't match the current path however, so you get a null result back from the render.
I'm facing a similar situation at work. My plan to work around it is to replace react-router's Switch in my routing code with a custom component which iterates through its children, manually rendering each one in turn, and returning the result of the first one that returns something other than null. I'll update this answer when I've given it a shot.
Edit: Well, that didn't work. I couldn't work out a supported way to manually invoke "render" on the children. Sorry I couldn't give you a workaround to Switch's limitations.

In case anyone reads this in >= 2019, one way to deal with this behaviour is to simply wrap the Route-component like so:
import React from 'react'
import { Route } from 'react-router-dom'
type Props = {
permissions: string[]
componentWhenNotAuthorized?: React.ElementType
}
const AuthorizedRoute: React.FunctionComponent<Props> = ({
permissions,
componentWhenNotAuthorized: ComponentWhenNotAuthorized,
...rest
}) => {
const isAuthorized = someFancyAuthorizationLogic(permissions)
return isAuthorized
? <Route {...rest} />
: ComponentWhenNotAuthorized
? <ComponentWhenNotAuthorized {...rest} />
: null
}
export default AuthorizedRoute
Then, simply use it as such:
import React from 'react'
import { Route, Switch } from 'react-router-dom'
import AuthorizedRoute from 'some/path/AuthorizedRoute'
import Account from 'some/path/Account'
import Admin from 'some/path/Admin'
import Dashboard from 'some/path/Dashboard'
import NotFound from 'some/path/NotFound'
import Users from 'some/path/Users'
const AppRouter: React.FunctionComponent = () => (
<Switch>
<Route
component={Account}
path='/accounts'
/>
<AuthorizedRoute
component={Admin}
componentWhenNotAuthorized={NotFound}
path='/admin'
permissions={['view-admin']}
/>
<Route
component={Dashboard}
path='/dashboard'
/>
<Route
component={Users}
path='/users'
/>
<Route
component={NotFound}
/>
</Switch>
)
export default AppRouter

Similar idea to what Robert said, here's how I did it
class NullComponent extends React.Component {
shouldComponentBeRenderedByRoute() {
return false;
}
render() {
return null;
}
}
class CustomSwitch extends React.Component {
render() {
return (
// React.Children.map returns components even for null, which
const children = React.Children.toArray(this.props.children).map(child => {
const { render, shouldComponentBeRenderedByRoute } = child.type.prototype;
if (shouldComponentBeRenderedByRoute && !shouldComponentBeRenderedByRoute.call(child)) {
return null;
}
if (shouldComponentBeRenderedByRoute) {
return render.call(child);
}
return child;
});
return <Switch>{children}</Switch>;
);
}
}
then use it just do
<CustomSwitch>
<Route path... />
<NullComponent />
<Route path... />
</CustomSwitch>
here, a component without shouldComponentBeRenderedByRoute function is assumed to be a valid Route component from react-router, but you can add more condition (maybe use path props) to check if it's a valid Route