I'm using React router and i would like to be able to send links or share it but everytime i realload the page, the state is becoming empty
http://localhost:3000/project/element=7/userid=9/exercises
If i enter this query in the url the state will not be preserved.
Here is my code:
<Route
exact
path="/project/element=:elementId/userid=:userid/exercises"
component={Exercises}
key={`exercises-id`}
/>
I tried to:
<Link to="/project/element=:elementId/userid=:userid/exercises" query={this.props.query}
But it's not preservering the state of my userId and elementId.
Here is the route:
<Route
exact
path="/project/element=:elementId/userid=:userid/exercises"
component={Exercises}
key={`exercises-id`}
/>
Thanks for the help
path="/project/element=:elementId/userid=:userid/exercises"
Should be
path="/project/element/:elementId/userid/:userid/exercises"
inside
Related
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
I have component with a button. I'd like a component to open another component in the new URL when the button is pressed. I don't want other components on the new page. I also want to pass data to a new component.
UPDATE:
<BrowserRouter>
<Link onClick={this.getData.bind(this)} to={{ pathname: "/test", data: this.state.data }}>Begin</Link>
<Switch>
<Route exact path="/test" component={Test} />
</Switch>
</BrowserRouter>
I wrote some code, but I have 2 problems:
How can I fetch data before route?
My component "Test" render on this page with previous components, I want only "Test" component on page
Please see react-router-dom for page to page navigation and passing data from one page to another.
You can use switch from react router dom along with routes. Please see documentation you will get to know about it.
I have a React route like code below:
<Route path='/settings' component={Settings} />
And inside Settings component, it has 3 nested routes:
<Route path='/settings/general' component={GeneralSetting} />
<Route path='/settings/team' component={TeamSetting} />
<Route path='/settings/email' component={EmailSetting} />
So my question is how can I get the nested pathname at most right position (such as '/general', '/email') only without the parent route ('/settings'). Currently, I'm using string splitter on location pathname (/settings/general) to achieve this. Are there any best practice for this situation?
I appreciate any help. Thanks in advance.
IMO, there are no best practice to get child path in react router. You are using string splitter on location which is fine though.
If you still need to get child path only you can use params in url instead and render component on based of params like below
<Route path='/settings/:type' component={Type} />
In Type (new component to render child) component you can get params like below
this.props.match.params.type
that will give you general , team and email value based on your url.
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 am running into the issue where the URL is changing but the page is not when using react-router and redux. I have attempted the solutions from the docs involving location and using withRouter (https://reacttraining.com/react-router/web/guides/dealing-with-update-blocking), however, I believe the issue stems from the fact that I am trying to reload the same component and then use the params from the URL to make an API call that then re-renders the component with the retrieved values.
<Route path="/video/:id" exact={true} component={VideoDisplay} />
and then from within the VideoDisplay component:
<Link to={`/video/${props.id}`}>
I duplicated the component, which gets around the issue of trying to link to a route's own component:
<Route path="/video/:id" exact={true} component={VideoDisplay} />
<Route path="/video/test/:id" exact={true} component={VideoDisplayTwo} />
<Link to={`/video/test/${props.id}`}>
<Link to={`/video/${props.id}`}>
This works, but I am looking for a more elegant solution.