I'm converting some existing code to use React Router.
The code currently uses <a href="#" ...>, which I am changing to <Link to=??>.
My question is:
What should I use for the "to" parameter? If I use to="#", the application routes to "/", which is not what I want.
It works if I use the current route name, but the whole idea of href="#" is that the code doesn't have to know how it is accessed.
I am using React Router 2 with history=browserHistory.
Here are a few solutions that worked for me:
<Link to={{}}>
to can take an object; sending an empty object stays on the current page
<Link to={{ search: '' }}>
In my specific case, I wanted to stay on the same page but wipe the search params, which is what this does
<Link to={window.location.pathname}>
Similar to the suggestion in Damien Leroux's answer, without the hash
<Link to="#">
This seemed to work fine for me, maybe because I'm using react-router v6
What didn't work for me:
<Link to={this.props.route.path}
I'm using functional components, so I don't have any this.props. Maybe there's another way in the react-router API to get the path.
<Link to=".">
This linked to / for me
For me this was the solution:
I used the npm module react-router-hash-link. It is quite easy to use. Docs here
import { HashLink as Link } from 'react-router-hash-link';
<Link smooth to="/#services">Services</Link>
And wrap your <App> component in <HashRouter> from npm module react-router-dom
stackoverflow answer
I think you could try something more or less like that:
<Link to={window.location.pathname} hash="/#">HASH</Link>
See there : https://github.com/reactjs/react-router/blob/master/docs/API.md#hash
This works because "this.props.route.path" is the route to the current page:
<Link to={this.props.route.path} ...
Note that if you have nested React components, you have to pass "this.path" down from the outer components, as described at https://facebook.github.io/react/docs/transferring-props.html
<Link to='#' />
this works but it will still stack your history
It works for me:
<Link className="dropdown-item" to="javascript:void()">
Link Title
</Link>
If you need to go to a specified section of your "/" path (even from another path), you can make it work with the anchor tag as well, like this:
Go to Section
Hope this helps.
Related
At the moment, I am trying to list projects on a website in a grid. Some of them link to another page on the site and others link to another domain page. At the moment I am using React-Router's 'Link' to go from one page to another, however this doesn't work when going to a page outside of the domain. In the JSON file, I check for the 'url' variable which returns either the URL if its public or 'project-page' if it is local. I can't figure out how to differentiate between the two in JSX; is there a work around while still utilizing the JSON file?
<div className="projects">
{projectData.map((projectDetail, index) => {
return(
<div className='project-card'>
<Link to={projectDetail.url}>
<img src={require('./images/icons/' + projectDetail.alt + '.jpg')} alt={projectDetail.title}/>
<h3>{projectDetail.title}</h3>
<p>{projectDetail.subtext}</p>
</Link>
</div>
)
})}
</div>
Well, to differentiate you can check the content of the projectDetail.url you are retrieving from that JSON in your javascript file, if that matches your domain (your website - having a project-page as you mention) or is it an external domain. You can also set a flag value in your json file. For each project set a value (e.g externalUrl: 1 or 0) and then check if projectDetail.externalUrl is 1 (it contains an external link). Then, maybe try the following for external domains:
<Link to={{ pathname: "external URL" }} target="_blank" />
In your case:
<Link to={{ pathname: projectDetail.url }} target="_blank" />
See this answer for detailed information: React-Router External link
Edit 1
If Link does not work for external websites, this would probably be related to the version of react-router you are using. Actually, to navigate to external websites you can as well use anchort tags <a> to redirect. Check what URL your project has and then conditional render a <Link> or <a>.
<a href="www.example.com" target=_blank></a>
Is it possible to change the URL via changing the app-route data object in polymer? Like described here: https://www.polymer-project.org/1.0/toolbox/routing#change-routes
In this example they are using this.set('routeData.user', 'mary'); to change the URL.
In our case its not working and we cant find the problem in our code.
We nearly removed all our code and just using this app-router configuration:
<app-route route="{{route}}"
pattern="/:view"
data="{{routeData}}">
</app-route>
In our attached lifecycle event we are using this:
attached: function(){
var self = this;
setTimeout(function(){
self.set('routeData.view', 'GNAAA');
});
}
Expected URL in address bar is
http://localhost:8888/polymer/index.html#/GNAAA
But we only got
http://localhost:8888/polymer/index.html#/
What are we missing here. Why we cant set the URL via the data object as mentioned in the docs? Maybe its a bug? But we cant find something on the GutHub Buglist of app-route.
UPDATE: We are also using iron-location to get query params from URL. If we remove iron-location all works as expected. So we currently created an issue on github.
Try adding <app-location route="{{route}}"></app-location> before your <app-route> statement.
Or, if you prefer to use iron-location, use iron-route-converter:
<iron-location path="{{path}}" query="{{query}}"></iron-location>
<iron-query-params
params-string="{{query}}"
params-object="{{queryParams}}">
</iron-query-params>
<app-route-converter
path="{{path}}"
query-params="{{queryParams}}"
route="{{route}}">
</app-route-converter>
Also, don't forget to import all used components with <link rel="import"> tags or your components will not work, without telling you about it.
I'm trying to make a react-router app that animates page transitions using ReactCSSTransitionGroup, but I can't figure out how to dynamically set transitionName so that I can use different animations depending on the route I am trying to go to. For example, I want root routes to fade between each other, but children routes should slide in/out - aka, I want it to work like a native app.
When using the code:
<ReactCSSTransitionGroup
transitionName={transitionValue}
transitionEnterTimeout={500}
transitionLeaveTimeout={500}
>
...
</ReactCSSTransitionGroup>
How can I make transitionValue something that can either be set by a Link component or based on the route that is loaded? I'm not sure the best way to do this.
Thanks for any help!
I'm not sure if it's the best option, but I added query to the Link and then accessed it via this.props.location.query.tran
<ReactCSSTransitionGroup
transitionName={this.props.location.query.tran || 'fade'}
transitionEnterTimeout={500}
transitionLeaveTimeout={500}
>
...
</ReactCSSTransitionGroup>
And the link looks like this:
<Link to={{ pathname: '/role/1', query: { tran: 'coverLeft' }}}/>
Hope this helps someone. Or, if anyone has a better approach, I'd love to hear it as I don't love that my solution dirties the URL a bit.
When I user this Route :
Route::get('home', function()
{
return View::make('index');
});
with URL:
localhost/laravel/public/home
It get the view and works well .
But when use this Route:
Route::get('home/{id}', function($id)
{
return View::make('index')->with('id', $id);
});
with URL:
localhost/laravel/public/home/10
It the view but doesn't work well that view come without any CSS, JS, .. etc
I can't define the ERROR here ?!
Yeah, I know this might be very late for this question, but I also got the same problem and stuck in the same situation.
After reading and researching on google, I got the answer.
I hope it may help someone.
This problems occurrs because we are using the relative path in our blade template and the solution is so simple, We have to use only the asset function to overcome this problem.
So change your code like this...
<link href="{{ asset('css/bootstrap.min.css') }}" rel='stylesheet' type='text/css' />
<script src="{{ asset('js/jquery.min.js') }}"> </script>
Hope that helps.
Happy Coding :)
Controller :
public function Details($id){
$demandes=DB::select('SELECT * FROM demande where id_demande=? ',[$id]);
$buts=DB::select('SELECT * FROM but where id_demande=? ',[$id]);
return view('details')->with(array('demandes'=>$demandes ,'buts'=>$buts));
}
Web.php :
Route::get('/Details/{id}','DemandeController#Details')->name('Details');
Blade.php :
#extends('layouts.mainlayout')
#section('content')
//code
#endsection
The problem is the blade is not loading css and Js
So you need to put this code in the <head> ----> <base href="/public">
Run this..
php artisan ui bootstrap --auth
source: Laravel frontend docs
OK, its a old thread, but here is my solution for records.
I've put ../ in front of my existing resource e.g
<script src="js/front.js"></script>
became
<script src="../js/front.js"></script>
as answered above not only for resources that are called from the header in your blade but for effectiveness ensure that all other resources within your blade are also referenced using the asset() method such as when referencing images/ videos without your page.
I have a page 'foo.html' that populates a table via AJAX 'ajax.html?options=option1'(accesses a database.)
'foo.html' has a css linked to it that makes the table from ajax.html look nice. However, I'd like to have ajax.html also look nice with a css if it is directly accessed. if I add <link rel="stylesheet" type="text/css" href="/dev/css/default.css" /> then the AJAX inserts the link again in foo.html which I don't want. Is there any way I can make the css link code not show up in the AJAX call or only show up on non-AJAX calls?
Thanks.
an easy way i can think of to solve this problem is to pass an additional parameter that defines the calling context.
The easiest way to do this is to use jQuery.
Load the ajax.html page with jQuery.get()
on success, do :
Remove the stylesheet : $('link[rel=stylesheet]').remove();
If you then want to add another stylesheet :
var link = $("<link>");
link.attr({
type: 'text/css',
rel: 'stylesheet',
href: 'http://domain.com/stylesheet.css'
});
$("head").append( link );
Or change it later :
$("link").attr("href","http://domain.com/stylesheet.css");