I have read up on dynamic routes, but haven't found a solution that worked for me. I am working on a project where, when I click next, I want the routes to change as follows:
/part1/4
/part1/3
/part1/2
/part1/1
/part2/4
/part2/3
/part2/2
/part2/1
…
/part5/4
/part5/3
/part5/2
/part5/1
And of course if I click back, it should back through the routes.
I have this in App.js:
<Route path='/:part/:score' exact component={Questionnaire} />
But I'm not sure what I would need to put into the "to" part to change the /part1/ to part2, 3, 4, et.c at the appropriate time.
<Link to={`/part1/${scoreNum}`} id="next" onClick={this.disablePrevSelection} className={`btn btn-normal btn-green ${disabled}`}>Next ></Link>
I apologize in advance if this is a simple question as I am new to ReactJs. Please let me know if anything else is needed.
Thank you!
Your route should be like this:
<Route path='/path' component={Questionnaire} />
Note that we omitted exact here so that we can match every route starting with path
And link to it would be something like:
<Link to={`/part${partNum}/${scoreNum}`} id="next" onClick={this.disablePrevSelection} className={`btn btn-normal btn-green ${disabled}`}>Next ></Link>
Related
Can't see a way in V6 to dynamically add an external link without the router prepending the site URL. Just need to do something like this:
<a href={dynamicStrValue} target='_blank' rel='noreferrer'>Link</a>
What about:
<Link to={{ pathname:`https://example.com/${dynamicStrValue}`}} target="_blank">My link</Link>
Referring to their docs
<Link to> with a .. behaves differently from a normal when
the current URL ends with /. ignores the trailing slash, and
removes one URL segment for each ... But an value handles ..
differently when the current URL ends with / vs when it does not.
Your link must include the protocol to avoid RR prepending the site url.
I was having the same problem as you, when executing an external component using a plain anchor tag it was redirecting to the router, instead of opening a blank page.
The solution to my problem was simply removing the key param in the anchor tag as follows
<a key={item.key} href='{item.url}' target='_blank'> {item.title} <a/>
to
<a href='{item.url}' target='_blank'> {item.title} <a/>
I'm using NextJs. I would like to create a link in my header section. This link should take the user to TestimonialsSection on the same page by scrolling.
<Link href={"#TestimonialsSection"}>
<a className={styles.Designation}>Mentor</a>
</Link>
This is the code I tried, but it didn't work. The URL changes though. Thanks in advance
In vanilla HTML you'd do something like this
My first section
My second section
<div id="first-section">SECTION 1</div>
<main id="second-section">SECTION 2</main>
In NextJS you'd so something similar. Instead of using the anchor tag for linking, you'd use the Link components.
<Link href="#first-section">My first section</Link>
<Link href="#second-section">My second section</Link>
<div id="first-section">SECTION 1</div>
<main id="second-section">SECTION 2</main>
This would work just fine.
However, if you want your starting URL to be www.my-site.com/#second-section, you would need to set the Link component's scroll prop to false.
Ex:
...
<Link href="#second-section" scroll={false}>My second section</Link>
...
Make sure your sections/divs ie the target elements have the ID attribute set to them properly without the # and the corresponding
anchor links have the # prefixed to ID name
Here's the official NextJS documentation https://nextjs.org/docs/api-reference/next/link
Hope this resolves your issue.
If it's just a static string you should remove the braces as ЖнецЪ says above.
If you're making a reusable component where you need to specify the ID from a parent, use a template string and keep the braces.
<Link href={`#${props.id}`}>
<a className={styles.Designation}>Mentor</a>
</Link>
Try to use Link tag and in URL add #some-link and then in Link tag href with href='#some-link'
www.google.com/#some-link
<Link href='#some-link'>
// code section
</Link>
I have a site.
http://example.com
On my site I have multiple languages which get appended to the url.
So the homepage becomes something such as
http://example.com/english
When the user navigates to the account section, it is a React single page app with React Router
http://example.com/english/account
On this account section, there are multiple tabs that load different templates
http://example.com/english/account/login
http://example.com/english/account/create-account
Now the 'english' part of the url could be any language (french, german, spanish). How would I set up my React routing to account for this dynamic part of the url? I ultimately want to do something with a wildcard effect, but this doesn't seem to work
<NavLink className="nav" to="/*/account/login">
<div>
<h5>Login</h5>
</div>
</NavLink>
Adding explicit values such as
/english/account/login seems to work. But I'd rather not hardcode every language
You can use props.match.url for creating relative urls.
<NavLink className="nav" to={this.props.match.url}+"/account/login">
<div>
<h5>Login</h5>
</div>
</NavLink>
My problem is passing ${file.id} to link, but when I navigate to that link, I only receive like this:
the ${file.id} is not get correct value.
But when I inspect the key of row, it can render correct.
What are my mising?
Thanks
You are using the wrong quotes. String interpolation is not possible with single quotes or doublequotes. You have to use the backtick `
So
<Link to={'api/admin/blobManager/${file.id}'} />
should instead be
<Link to={`api/admin/blobManager/${file.id}`} />
Sorry to disturb, guys. I'm so new to react and react-router and I've been struggling for few days already.
Actually I am trying to pass some values before jumping to a new page (using Link attribute target="_blank") and in the new page, I want to use these values to communicate with the server and when the data from the server comes, the new page will load its content.
the route path is something like this
<Route path="/root/the_page" component={the_component} />
and the link will be like this:
<Link to="/root/the_page" target="_blank" />
What I have checked is this discussion about using a function to pass the value, but I really cannot re-produce it. As for the query-params, I cannot retrieve the query in this.props.location even I set the link as follows:
<Link to={{pathname:"/root/the_page", query: {the_key: the_value}}} target="_blank" />
Any advice will be helpful.
Thank you in advance!
I don't see any reason why you would want to use React-Router to navigate to an external page. React-Router is meant for navigation in single-page applications but opening a link with target="_blank" would mean leaving that single-page app and opening new window/tab.
As such, why not just use a regular anchor tag? That's perfectly viable for external navigation.
Click me
Obviously, your history object won't be carried over because you are opening a new window/tab - so you won't be able to go "back" or do any of that.
Check this codepen (click on users submenu item). The new window is opened with params.
<Link to={{pathname: "/users", query: { someParam: 'someValue' }}} target="_blank">Users</Link>
https://codepen.io/Kotuhan/pen/JOJzNY
Then, you can get your params from window.location.search string.