<Link to={`channels/${channel.channel_name}`}> {channel.channel_name}</Link>
Let's say the user is watching a video (current url = 'localhost:3000/videos/1') and they want to click on the channel's link, when they do I want to send them to 'localhost:3000/channels/Lun', but for some reason the links just stack like this 'localhost:3000/videos/1/channels/Lun'... I treid using the replace keyword but that doesnt work too, any help is appreciated!
Need to change the link like this.
<Link to={`/videos/${//route here}`}>
Related
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.
I'm working on editor where user can set link to another website , for example stackoverflow.com. If user set this url to <a> element and then click on this link he will be navigated to http://myapp.com/stackoverflow.com but not to http://stackoverflow.com. I supposed that this is caused by changed default behavior of element.
How can i make this link external? if user will copy url from browser and paste he will paste http://stackoverflow.com and hence everything will works fine. But in case he manually enter stackoverflow.com nothing will work fine.
P.s. i also would like to make each element with attribute target="_blank" so, i assume that i can't navigate programatically
Any ideas?
Try setting the <a>'s href attribute to the full url, not just stackoverflow.com:
<a href="http://stackoverflow.com" />
Otherwise it's treated as a relative url.
Add a check to see whether your users input the url as stackoverflow.com, and if they do, change it to http://stackoverflow.com before setting the href attribute.
Didn't get your other question about programmatic navigation, but if you want a link to open in a new window/tab, use
<a href="http://stackoverflow.com" target="_blank" />
I am using react-router + react-router-redux in my app.
What I want to achieve is every time user click a tab in the dashboard it will change the URL to /dashboard/messages, for instance.
However, using push('dashboard/' + page), every time I click a tab it will append the link.
My current situation:
Current URL is /dashboard.
Click a Messages tab.
The URL changes into /dashboard/messages.
Click a Home tab.
The URL changes into /dashboard/messages/dashboard/home.
Is there any way to just replace the /dashboard/messages into /dashboard/home when we click Home tab after cliked the Messages tab?
Many thanks!
I found the silly mistake, sorry for this.
So apparently it has to be push('/dashboard/' + page) instead of push('dashboard/' + page).
If you're coming in here from a react-router-dom perspective, please note that <Link to='stringUrl' /> concatenates whatever you place on the to attribute to the current path. So, if you are currently on /home path, it will produce /home/StringUrl as a result.
However, if you place a forward slash / instead, i.e. <Link to='/stringUrl' /> it won't do that, thus producing /StringUrl path.
use this
push('/dashboard/' + page)
I'm creating a custom theme (as a n00b). Basically, I display content on the main page as small div blocks.
my node.tpl.php looks something like this:
<div class="content-block">
default node.tpl.php stuff here
</div>
This works OK on the front page. However, when I click "Read More," to take me to the full article page, /node/[nodeId], obviously, it still shows as the little CSS content-block div.
I'd like to show the full article using a different CSS class. What's the best way to do this?
Yes, there are some best ways to accomplish that.
First of all I am not sure, whether you are using separate front page tpl or not. If not then please try to use page--front.tpl.php. Where you can provide your desired format to create the proper front page. Why this is needed, cause you won't need to modify the node.tpl.php file. So inside this front tpl file you can put your desired code.
<div class="content-block">
default node.tpl.php stuff here
</div>
Also you can use the Panel module to create a front page. So you won't be needed to modify the nope tpl file. Always try to avoid modifying tpl file. Panel module makes it easier.
Secondly, you should not touch the node.tpl.php file. Once you will modify the file, you won't be able to re-define as default. So keep that as it is and revert back it to the default file. Now if you send some article link, it won't break.
So this is it. If this helps you, then please like :)
Keep Drupalizing :)
This is such a great script called fullPage.js located here: https://github.com/alvarotrigo/fullPage.js
I managed to load the js file and css file and even with the Void Menu Module, managed to call anchor links, but I'm struggling with the data attributes part of the implementation of this cool code! Any help is greatly appreciated! How do I get data-attributes to work in Drupal 7.25? I mean, I need to add them to the menu, so that the html looks something like this:
<ul id="menu">
<li data-menuanchor="firstPage">First slide</li>
<li data-menuanchor="secondPage">Second slide</li>
<li data-menuanchor="3rdPage">Third slide</li>
<li data-menuanchor="4thpage">Fourth slide</li>
</ul>
Just want to add it to the Main Menu in Drupal. Any idea how? Am trying to implement this on my homepage and using the Adaptive Sub-Theme with Display Suite Module installed, if that helps any.
Have added the following to template.php, but it makes no difference at all:
function MY_THEME_NAME_menu_link(&$variables) {
$variables['element']['#attributes']['data-menuanchor'] = substr($variables['element']['href'], 1);
return theme_menu_link($variables);
}
What am I doing wrong here?
EDIT
You can download the sitemaniacs theme here: http://dream-portal.net/dpdowns/MyProblem.zip
You can just download Adaptive Theme from Drupal here and than copy sitemaniacs to your sites/all/themes folder and than just enable the theme and go to your homepage.
There is also a folder called fullPage that is the example of it working perfectly fine without Drupal.
Files to take note of:
/sites/all/themes/sitemaniacs/scripts/custom.js
/sites/all/themes/sitemaniacs/template.php
/sites/all/themes/sitemaniacs/css/example2.css
/sites/all/themes/sitemaniacs/sitemaniacs.info
Let me know if you need anything else, k?
And Thank YOU!!! What I've done is create 4 Basic Pages, and using the Field Formatter Class Module to give the body field a class (when managing the Display) defined as section, than promoted to front page. Than I used HTML within another Node Type and used NodeBlock Module to output it as a menu item within the Menu Bar section of the blocks, with url <front>. Let me know if you need anything else for this, but I can't get it to work using this simple approach. I've tried tons of ways of doing it also, but no go for me. If you find a method that works, or perhaps something is wrong somewhere else, please please let me know.... I'm pulling out my hair on this one.
Have tried straight HTML, and now getting this:
Uncaught TypeError: Cannot read property 'top' of undefined jquery.fullPage.js?mzf0rp:506
scrollPage jquery.fullPage.js?mzf0rp:506
doneResizing jquery.fullPage.js?mzf0rp:889
The first error seems to occur in the scrollPage function on this line here:
var dtop = dest !== null ? dest.top : null;
Looks like dest.top is not defined on .top. Any idea why?
Use the Menu Link Attributes module that will let you add custom attributes per menu item.
for "href" you can use <'front'>#4thpage(front without any “cotation”) in path in menu that you create in Structure > Menus and use the Menu Link Attributes module for other attributes