I need to change url completely using following way.
let mycomplteUrl = 'http://localhost/tracks/id/4/39'; // http://localhost/tracks/id/4/39/4 or
props.history.push(`${mycomplteUrl}`);
I'm dynamically creating this mycomplteUrl variable. sometimes variable can be something like
http://localhost/tracks/id/4/39 or http://localhost/tracks/id/4/39/4 or http://localhost/tracks/id/4/39/4/5 (dynamic) or any
it is the same only up to http://localhost/tracks/id/4 this part. I need to replace whole url just like window.location.href = mycomplteUrl in normal javascript, but using props.history.push because i need to avoid from page refresh
Note: for React Router v6
import { useNavigate } from 'react-router-dom';
function MyComponentOrHook() {
const navigate = useNavigate();
// push
navigate(url); // syntax
navigate("/about"); // example
// replace
navigate(url, { replace: true }); // syntax
navigate("/about", { replace: true }); // example
return ... // JSX or hook return values
}
Also, avoid using window.location if you're using React Router, except in rare cases (example - to navigate to an external link).
Reason:
The whole point of using a library React Router is to ease client-side routing so we don't have to do window.location....
window.location causes a reload, which should be avoided in React apps (or any SPA), mostly.
props.history.replace(mycomplteUrl);
If you want to avoid from a page refresh you can do it in this way
window.history.pushState({}, null, "/newPathname");
Try the below way and define the exact URL you want.
window.location.replace(`http://localhost:3000/${dynamic_value}`);
Related
In a logout button, should I be using window.location.replace('/') or window.location.href=window.location.origin. What is the difference between these two methods? I know that both of them clear the current href from the history, so the url won't be accessible to the user after logging out using either of them.
if you are using next.js you can use next/router which is a better approach to it.
import { useRouter } from 'next/router'
const router = useRouter()
//and then you can do it like this
router.replace('/')
//or
router.push('/')
How can I always get the same part of the URL in react?
example:
http://localhost:3000/supplier/924511e8-9056-4c1e-9976-625bf042924e
I only want "supplier", but this can be anything else. So it's possible for it to be:
http://localhost:3000/product/924511e8-9056-4c1e-9976-625bf042924e
Then I want "product"
But it can also be just http://localhost:3000/supplier/ also in this case I only want the supplier. And this can be anything.
How do I do this? If I've already tried it with pathname.slice(0, pathname.indexOf("/") but this doesn't seem to work.
So I only want the string after the http://localhost:3000/want this/ no matter if there is anything after it or not.
You can use the split method as below:
const url = 'http://localhost:3000/supplier/'
const want_this = url.split('/')[3]
Just use useParams from react router dom
import {useParams} from "react-router-dom";
function Child() {
// We can use the `useParams` hook here to access
// the dynamic pieces of the URL.
let { id } = useParams();
return (
<div>
<h3>ID: {id}</h3>
</div>
);
}
I have a "settings" page in my react app. The page has several tabs rendering different parts of settings.
It would be better UX if a user can share urls with other users.
What I want is (inside "settings" page):
user A clicks a tab
url changes with a #tabname appended
user A send that url to user B, and user B open that url
user B sees the same tab as user A
But with react router, the whole page re-renders if the url changed:
import { withRouter } from "react-router-dom"
const MyComp = (props) => {
...
const onTabChange = () => {
// append #tabname here
props.history.replace(...); // or `push`
...
}
...
export default withRouter(MyComp)
}
After a lot of searches, I found a solution to use window.history:
const onTabChange = () => {
window.history.pushState(null, null, "#tabname");
...
}
This does the trick, but little information and explanation, and I'd love to know the consequences of using this trick.
Is this a valid solution (for a react app)? Will this cause any problem?
(PS. I know how to parse a url)
More details:
To be more specific, there is a AuthChecker wrapper for all pages. When react router's location changes, it checks for the route's allowed auths and current user's auth.
I've tried /path/:id and everything but all change location, so auth checked and page rerendered.
And I've given up a solution in react router and just want to know: is it safe to change url with window.history in a react app using react router to manage routes?
this question is already answerd at this post.
so it says window has a property called history and there is a method on history which helps you update the history state without react-router-dom understanding it.
like this:
window.history.replaceState(null, 'New Page Title', '/new_url');
I have a website as a single page that is using Next.js. I have the home page on route / that show a list of products. The code of this page is located in pages/index.js. Each product has an id so I can jump to it using /#product-id.
To make it more url friendly I replicate this behaviour using the product-id as a second param in the route like that: /product-id.
What I do is simply looking on the product-id param using useRouter():
const selectedProductId = useRouter().query['product-id']
And then scroll to the element with this id using js:
document.getElementById(selectedProductId ).scrollIntoView()
So I to change my script name from /pages/index.js to /pages/[product-id].js.
So now the route /1234 work has expected but if I go to / I get error 404.
So has someone an idea how I can match / and /param using one js file?
Optional catch all routes
Catch all routes can be made optional by including the parameter in double brackets ([[...slug]]).
Nextjs has file system based routing, so if you remove /pages/index.js of course you will get an 404 error. Also /pages/index.js and /pages/[product-id].js will render two separate pages.
To answer your question, if it is possible to match two routes like / and /[productId] in one file using nextjs I don't think that is possible however similar results can be achieved by using shallow routing specific to your use case.
So for your use case, I suggest using shallow routing unless you want to render the same component in both pages just to get the product-id or want to make use of hash URLs.
You can make product-id a query string parameter and update it using shallow-routing. Here is an example,
Keep /pages/index.js
import { useRouter } from 'next/router';
const router = useRouter()
// when want to change the productId call
router.push('/?productId=1234', undefined, { shallow: true })
// call the scrollToView inside a useEffect hook
useEffect(() => {
const productId = router.query.productId
// get the element using the productId above then call scrollIntoView()
})
// if using useEffect with the dependency router.query.productId,
// when you change the productId once and scroll up and try to change to the same -
// productId again it will not scroll to view, hence not using the dependency array
// at all
To explain more on what shallow routing does
Shallow routing will allow the change of URL without running the data fetching methods i.e getStaticProps or getServerSideProps again. Which will make the updated query and pathname available without changing the state. Read more about it nextjs docs.
Option 1: Extract the shared code
You could extract a Page component to a separate file and then import it in both /pages/index.js and /pages/[product-id].js, so the code is not duplicated.
Option 2: Use experimental rewrites feature
Assuming you have /pages/[product-id].js you can show this page when a user requests /.
You would need to add next.config.js.
module.exports = {
experimental: {
async rewrites() {
return [
{ source: "/", destination: "/[product-id]" },
];
}
}
}
So, when a user requests / they would see the content of /[product-id], just with the empty product id.
Note, that at the moment rewrite doesn't support auto-rendered dynamic pages, so you have to disable auto-rendering for the dynamic page.
You can do that by adding getServerSideProps to /pages/[product-id].js.
export async function getServerSideProps() {
return {
props: {},
}
}
I am trying to redirect with react router to another page after a certain amount of time has passed.
The code I have so far is:
submitActivity(){
axios.post('/tiles', {
activityDate:this.state.startDate,
planId:this.state.planId,
value:this.state.sliderValue
})
.then(res=>{
console.log(res);
this.modalHandleShow();
setTimeout(function(){
this.goBackToTile();
}.bind(this),3000);
})
.catch(err=>console.log(err));
}
goBackToTile(){
this.props.history.push(`tile/${this.state.tileId}`)
}
history is definitely being called, but the url which is currently
/addActivity/tile/2/plan/9
only gets changed to
/addActivity/tile/2/plan/tile/2
while /tile/2 is correct I don't understand why the rest of the url stays in tact?
Make sure you include a / in the beginning of the string, or it will be used relative to your current url.
goBackToTile() {
this.props.history.push(`/tile/${this.state.tileId}`)
}