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.
Related
I have two different routes that are using the same component.
<BrowserRouter>
<Routes>
<Route path="/produktai" element={<Products />}/>
<Route path="/produktai/:productId" element={<Products />} />
</Routes>
</BrowserRouter>
I'm using Link from react to switch between pages and get id's from
const pathname = useLocation().pathname;
to perform rest api's.
For example, when i change pages using Link from /products to /products/2, url changes but the problem is that page doesn't refresh as it should. Problem solves if i'm using a tag with href as it always reloads page unlike smooth react Link functionality but i don't think that's a good solution.
Even though the route path changes you are still rendering the same Products component. If you need to run some logic when the path changes, or more likely, when the productId route param updates, then you should use an useEffect hook with the productId route param as a dependency.
Example:
const { productId } = useParams();
useEffect(() => {
if (productId) {
// Perform rest api call and response handling
}
}, [productId]);
There is a better approach for this issue. Give unique keys like below.
<Route path="/all-reports">
<ReportsPage key="1" />
</Route>
<Route path="/shared-reports">
<ReportsPage key="2" mode="shared" />
</Route>
<Route path="/owned-reports">
<ReportsPage key="3" mode="owned" />
</Route>
I am trying to implement a routing structure where a user goes to another user's page or their own when the path is /:username. I also want to render another page with a path /watch or /watch/ .. Facebook has a similar setup where /:username will take you to your page or another user's and /watch/ for example is a page. Is there best practice to achieve this with react-router?
As of now I have something like this..
<Route path="/" exact component={authenticated ? Home : Index} />
<Route path="/watch/" component={Watch} />
<Route path="/:username" exact component={({match}) => {
if(match.params.username === data.Username) {
return <ProfilePage match={match} />
} else {
return <UserPage match={match} />
}
}} />
Now if I got to /watch/ the profile component is being rendered aswell. So :username is going to match all my routes?
As you already deducted, /:username is matching at the same time as /watch/ because both patterns match the URL /watch/.
Thankfully, React Router provides a <Switch> component for cases like this one, where only the first match is rendered:
<Switch>
<Route path="/watch/" component={Watch} />
<Route path="/:username" component={...} />
</Switch>
Now, with the URL /watch/, only the first route is rendered, even though the second one matches too.
If you are using react-router-dom v6, do these:
instead of Switch, you should use Routes
instead of component={<SomeComponent />} property, use element={<SomeComponent />}
Just in case, you can Read this article about upgrading from v5 to v6
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'/>
So I have set up the following route in my app:
<Router history={history}>
<div>
<Route path={'/'} exact component={Home} />
<Route path={'/cachaca/:bottle'} component={BottlePage} />
<PublicRoute authed={this.state.authed} exact path={'/login'} component={Login} />
<PublicRoute authed={this.state.authed} exact path={'/register'} component={Register} />
<PrivateRoute authed={this.state.authed} path={'/dashboard'} component={Dashboard} />
</div>
</Router>
In different parts of the app, I programatically navigate around the app with history.push like so:
history.push({
pathname: '/',
search: '?startRange='+ startRange + '&endRange='+ endRange + '&maker=0'
})
The odd thing is that when that code runs, it triggers two actions - a PUSH and a POP causing the app to navigate twice. This is what we get from the history listener log after a single push:
The current URL is /?startRange=0&endRange=31&maker=0
The last navigation action was PUSH
The current URL is /?startRange=0&endRange=31&maker=0
The last navigation action was POP
The query params are getting properly stored and everything else seems to be working fine, but I was wondering what could be creating this problem so that my user doesn't have to back twice to go to where he actually was supposed to.
Incidentally, here is how I conjure up the history 'plugin':
import createHistory from 'history/createBrowserHistory'
const history = createHistory()
history.listen((location, action) => {
console.log(`The current URL is ${location.pathname}${location.search}${location.hash}`)
console.log(`The last navigation action was ${action}`)
})
export default history
There is also another instance where the push changes the url location bar but doesn't actually navigate anywhere but I'll save that for another question.
Am I doing something wrong? Appreciate any help!
Thanks!
It looks like you're trying to mix and match react-router v2 and v4, which are very different. See the comments here.
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);
},