I have two routes like below
<Route path='/dashboard/home' exact component={Charts} />
<Route path='/dashboard/map-view' component={Mapview} />
If user is navigating to just '/dashboard' also I need to show '/dashboard/home' route. Whenever I click home also I need to show same. How can I make it
You can use Redirect:
<Redirect from='/dashboard' to='/dashboard/home'/>
Related
I've had two routes:
<Route path="/client/:id/members" component={Members} />
<Route path="/client/:id/members/:mid" component={MemberProfile} />
why when I'm trigger:
window.location.href = `/client/${id}/members/${mid}`;
then my url is changed to correct form like in the route path but not redirect me to MemberProfile component?
Thanks for any help!
as
<Route path="/client/:id/members" component={Members} />
declared before
<Route path="/client/:id/members/:mid" component={MemberProfile} />
and
/client/${id}/members/${mid}
fit
"/client/:id/members"
Members component will still be rendered.
Consider one of the following:
decleare MemberProfile before Members
change MembersProfile route to /client/:id/member/:mid for example
use exact Route property
Given:
<Route path="/client/:id/members" component={Members} />
<Route path="/client/:id/members/:mid" component={MemberProfile} />
It seems like you are rendering these routes into a Switch component. Remember that the Switch component renders the first child <Route> or <Redirect> that matches the location. This means that route path order and specificity matters.
Order your routes by decreasing specificity. "/client/:id/members/:mid" is more specific than "/client/:id/members" and should render higher in the Switch.
<Switch>
...
<Route path="/client/:id/members/:mid" component={MemberProfile} />
<Route path="/client/:id/members" component={Members} />
...
</Switch>
Additional note
You may want to avoid using window.location.href to redirect as this reloads the entire page, and thus, your app. Use a Redirect component to render a declarative navigation, or use history.replace(`/client/${id}/members/${mid}`); to issue an imperative redirect.
I'm trying to create an independent Route (not sure if that's the correct term) at BulletinBoard.js where I can use Link to go to Create Bulletin component.
I'm also trying to create another independent Route at BulletinList.js where I can navigate to Edit Bulletin with their respective IDs.
Before this, I tried using useRouteMatch with path and url, but apparently that wasn't the correct way to do it, now I'm told to use useLocation, it does adds the /createbulletin and /editbulletin/id paths behind the current URL, but it doesn't navigate to the component itself.
I've been cracking my head over this for the past 2 days and I still haven't figured out the correct way to do this.
Here is the codesandbox that I've created for reference.
The reason your code didnt navigate to a different component after the url changed is because you didnt use the exact attribute when declaring the route. So its matching /bulletinboard/anything and then it always renders de BulletinBoard component.
You could define all routes at the App.js file like
<Switch>
<Route path="/" component={Home} exact />
<Route path="/bulletinboard" component={BulletinBoard} exact />
<Route path="/bulletinboard/edit/:id" component={EditBulletinBoard} exact />
<Route path="/infohub" component={InfoHub} exact />
<Route component={NotFound} />
</Switch>
Also, check out the useHistory hook
So at the BulletinBoard.js when the user clicks the link
onClick={() => history.push(`/bulletinboard/edit/${id}`)}
Note that the edit route renders a different component that your codesandbox didn't have yet
Let's say I have these routes:
<Route
path="/subpage/:slug"
component={SubPageDetail}
key="subpage-detail"
/>
<Route
path="/subpage"
component={SubPage}
key="subpage"
/>
For the :slug, we have certain pages that have a match e.g. /subpage/subpage-info1. However, if someone types gibberish as in: /subpage/fhfjadsf33, which doesn't exist, we want to redirect that user to the immediate parent which is /subpage (not the homepage or anything).
How do we achieve that in react-router?
All you have to do, is to add this route
<Route component = { ComponentError } />
Of corse, you have to create the ComponentError to show your page error or whatever you want.
But still, you will have a problem, the ComponentError will alwasye show in every page, to adjust this, you have to wrape your routes inside a switch tag like this.
import { Switch } from "react-router-dom"
...
...
<Switch>
<Route path="/subpage" component={SubPage} />
<Route component = { ComponentError } />
</Switch>
Of corse I would like to clarify that it is available on react Router V4.
Hope it will help.
Sorry I forgot to mention, that all you have to do, I think is to change this CompoenentError with your component subPage.
Like this, it will help you, and help others that want to achieve athores goal with that method
You have two options. Either you let react-router check if the route has been defined and if not, redirects the user to a default component. Or you can have logic in your code to check the url. I think the first option is the easiest.
Just add a route like so :
<Route path='*' exact={true} component={MyDefaultComponent} />
I am using react-router v3
i have few dropdowns on home page and button to move on product page.
when user again come back to home page it should display same value which user had selected. but some how it reload all values.
Is there any way using which i can preserve value easily using react-router ?
<Route path="/" component={Main} />
<Route path="product" >
<IndexRoute component={Product}/>
<Route path="offer">
<IndexRoute component={OfferForm} />
<Route path="confirm" component={OfferConfirm}/>
</Route>
<Route path="immediate">
<IndexRoute component={ImmediateOrderForm} />
<Route path="confirm" component={OfferConfirm}/>
</Route>
</Route>
</Route>
You can pass value while redirect or navigate to another page using params and you can get it there in the Component.
<Redirect to={{ pathname: '/url', params: { name: edit } }} />;
get the value like below in home page
let name = this.props.location.params.name;
You can use history like below but I think both are same. Anyway you need to pass all the values to the relevant router page while calling.
this.props.history.push({
pathname: '/url',
params: { name: edit }
});
Hope this will help . I dont think you can do it directly using react router.
You need to store choosen settings in localStorage and restore them on reloading page. You can use redux and redux-persist for this.
You can also use the saved (shared between pages) values on the details page for 'see also similar ...' section. It seems it can be done inside details query but I'd do it in a separate query (highly dynamic) - the detail view (main query) can be SSR-ed (with/without default similarities) which can be updated with fresh data after rehydrating/mounting/initial render.
I have my component "messages" and i am calling it using two different urls .when i click on first link say 'messages/1' it will load my messages inbox and i have another url 'messages/5/1' for which the component is same as for above url.when page got loaded using 'messages/1' url and when i clicked on some field which points to 'messages/5/1' .It changes the url in the header but it is not reloading the page.
i want to reload my component whenever there is different url even though they have same component .Is there any way to do this.
You can load the same component under different urls and it should load everything fine. Just change the path prop and add the same component you want under the component prop.
render((
<Router>
<Route path="/" component={App}>
<Route path="about" component={About} />
<Route path="inbox" component={Message}>
<Route path="messages/:id" component={Message} />
</Route>
</Route>
</Router>
), document.body)
edit:
You can try and use rect-router's refresh method
from https://github.com/reactjs/react-router/blob/v0.13.3/modules/createRouter.js#L435-L437
refresh: function () {
Router.dispatch(location.getCurrentPath(), null);
},