I think you have the right idea. 

I personally use `.replace` when redirecting from an invalid url (or non relevant, i.e. redirect to &quot;profile&quot; page when a logged user goes to the &quot;/login&quot; url), so using the browser&#39;s &quot;back&quot; button works properly for the end user.

router.replace acts like router.push, the only difference is that it navigates without pushing a new history entry, as its name suggests - it replaces the current entry.

I like to use `.replace()` when i have a definitive action and i dont want the user to be able to come back to this page. 

Example: i have a product detail page with a delete button to ultimately deletes the product. When i click the button i do `router.replace` back to the list of all products so when the user uses the back button in the browser he is not able to go back to the details page so he cannot see or even click again the delete button as this product does not exist anymore. 

I need to get the path of the script. I can do that using `pwd` if I am already in the same directory, I searched online and I found this 

`DIR=&quot;$( cd &quot;$( dirname &quot;${BASH_SOURCE[0]}&quot; )&quot; &amp;&amp; pwd )&quot;` 

But I don&#39;t know how to use that.



DIR=&quot;$( cd &quot;$( dirname &quot;${BASH_SOURCE[0]}&quot; )&quot; &amp;&amp; pwd )&quot; How does that work?

It is possible for a GCC plugin to add a new builtin function? If so, how to do it properly?

GCC version is 5.3 (or newer). The code is compiled and processed by the plugin written in C.

It is mentioned in the [rationale for GCC plugins at gcc-melt.org](http://starynkevitch.net/Basile/gcc-melt/) that this is doable but I cannot see how.

As far as I can see in the sources of GCC, the builtins are created using `add_builtin_function()` from [gcc/langhooks.c](https://github.com/gcc-mirror/gcc/blob/gcc-5-branch/gcc/langhooks.c#L605):

    tree
    add_builtin_function (const char *name,
          tree type,
          int function_code,
          enum built_in_class cl,
          const char *library_name,
          tree attrs)

It is more or less clear which values the arguments of this function should have, except for `function_code`, a unique numeric ID of the function.

Looks like (see `add_builtin_function_common()`), a value from `enum built_in_function` is expected there but a GCC plugin cannot change that enum.

One cannot pass any random value greater than `END_BUILTINS` as `function_code` either, it seems. `builtin_decl_implicit()` and `builtin_decl_explicit()` would have a failed assertion in that case.

So, what is the proper way to add a builtin in a GCC plugin (without using MELT and such, just GCC plugin API)?

**Update**
I looked again at the implementation of `add_builtin_function_common()` and of `langhooks.builtin_function()` for C as well as at how these are used in GCC. It seems that 0 is acceptable as `function_code` in some cases. You cannot use `builtin_decl_implicit()` then but you can save the DECL returned by `add_builtin_function()` and use it later.

Looks like the only event when I can try to create built-ins that way is PLUGIN_START_UNIT (otherwise GCC may crash due to `external_scope` variable being NULL).

I tried the following at that stage (`fntype` was created before):

    decl = add_builtin_function (
        &quot;my_helper&quot;, fntype,
        0 /* function_code */,
        BUILT_IN_NORMAL /* enum built_in_class cl */,
        NULL /* library_name */,
        NULL_TREE /* attrs */)

`my_helper` was defined in a different C source file compiled and linked with the main source file. Then I used decl to insert the calls to that function into other functions (`gimple_build_call`) during my GIMPLE pass.

GCC output no errors and indeed inserted the call to `my_helper` but as a call to an ordinary function. I actually needed a builtin to avoid a call but rather insert the body of the function.

On the other hand, `tsan0` pass, which executes right after my pass, inserts the calls of builtin functions just like one would expect: there is no explicit call as a result, just the body of the function is inserted. Its builtins, however, are defined by GCC itself rather than by the plugins.

So I suppose my builtin still needs something to be a valid builtin, but I do not know what it is. What could that be?


How to add a builtin function in a GCC plugin?

I use [History][1] package to redirect invalid URL to 404 page on my react component.

I use `.replace` instead of `.push` simply because I don&#39;t want the browser to record any invalid url I have visited.

Have I missed the point here? And is there a trade-off between choosing one or the other for my purpose?

Can someone explain to me? thanks in advance ;)


  [1]: https://github.com/mjackson/history

What is the trade off between history push and replace?

I use <a href="https://github.com/mjackson/history" target="_blank" rel="noopener noreferrer">History</a> package to redirect invalid URL to 404 page on my react component.
I use <code>.replace</code> instead of <code>.push</code> simply because I don't want the browser to record any invalid url I have visited.
Have I missed the point here? And is there a trade-off between choosing one or the other for my purpose?
Can someone explain to me? thanks in advance ;)

I&#39;m using Material-ui&#39;s Tabs, which are controlled and I&#39;m using them for (React-router) Links like this:

        &lt;Tab value={0} label=&quot;dashboard&quot; containerElement={&lt;Link to=&quot;/dashboard/home&quot;/&gt;}/&gt;
        &lt;Tab value={1} label=&quot;users&quot; containerElement={&lt;Link to=&quot;/dashboard/users&quot;/&gt;} /&gt;
      &lt;Tab value={2} label=&quot;data&quot; containerElement={&lt;Link to=&quot;/dashboard/data&quot;/&gt;} /&gt;

If I&#39;m currenlty visting dashboard/data and I click browser&#39;s back button
I go (for example) to dashboard/users but the highlighted Tab still stays on dashboard/data (value=2)

I can change by setting state, but I don&#39;t know how to handle the event when the browser&#39;s back button is pressed?

I&#39;ve found this:

    window.onpopstate = this.onBackButtonEvent;

but this is called each time state is changed (not only on back button event)



Intercept/handle browser&#39;s back button in React-router?

I am trying to get my first Jest Test to pass with React and Babel.

I am getting the following error:

&gt;SyntaxError: /Users/manueldupont/test/avid-sibelius-publishing-viewer/src/components/TransportButton/TransportButton.less: Unexpected token 
        
        
        &gt;  7 | @import &#39;../variables.css&#39;;
              | ^

My package.json config for jest look like this: 


    &quot;babel&quot;: {
        &quot;presets&quot;: [
          &quot;es2015&quot;,
          &quot;react&quot;
        ],
        &quot;plugins&quot;: [
          &quot;syntax-class-properties&quot;,
          &quot;transform-class-properties&quot;
        ]
      },
      &quot;jest&quot;: {
        &quot;moduleNameMapper&quot;: {
          &quot;^image![a-zA-Z0-9$_-]+$&quot;: &quot;GlobalImageStub&quot;,
          &quot;^[./a-zA-Z0-9$_-]+\\.png$&quot;: &quot;RelativeImageStub&quot;
        },
        &quot;testPathIgnorePatterns&quot;: [
          &quot;/node_modules/&quot;
        ],
        &quot;collectCoverage&quot;: true,
        &quot;verbose&quot;: true,
        &quot;modulePathIgnorePatterns&quot;: [
          &quot;rpmbuild&quot;
        ],
        &quot;unmockedModulePathPatterns&quot;: [
          &quot;&lt;rootDir&gt;/node_modules/react/&quot;,
          &quot;&lt;rootDir&gt;/node_modules/react-dom/&quot;,
          &quot;&lt;rootDir&gt;/node_modules/react-addons-test-utils/&quot;,
          &quot;&lt;rootDir&gt;/node_modules/fbjs&quot;,
          &quot;&lt;rootDir&gt;/node_modules/core-js&quot;
        ]
      },

So what am I missing?



SyntaxError with Jest and React and importing CSS files

I was reading the documentation for the Redux library and it has this example:

&gt; In addition to reading the state, container components can dispatch actions. In a similar fashion, you can define a function called `mapDispatchToProps()` that receives the `dispatch()` method and returns callback props that you want to inject into the presentational component.

This actually makes no sense. Why do you need `mapDispatchToProps` when you already have `mapStateToProps`? 

They also provide this handy code sample:


    const mapDispatchToProps = (dispatch) =&gt; {
      return {
        onTodoClick: (id) =&gt; {
          dispatch(toggleTodo(id))
        }
      }
    }


What is this function and why it is useful?

What is mapDispatchToProps?

I have a file test_stuff.js that I am running with `npm test`

It pretty much looks like this:


    import { assert } from &#39;assert&#39;;
    import { MyProvider } from &#39;../src/index&#39;;
    import { React } from &#39;react&#39;;

    const myProvider = (
      &lt;MyProvider&gt;
      &lt;/MyProvider&gt;
    );

    describe(&#39;Array&#39;, function() {
      describe(&#39;#indexOf()&#39;, function() {
        it(&#39;should return -1 when the value is not present&#39;, function() {
          assert.equal(-1, [1,2,3].indexOf(4));
        });
      });
    });


Unfortunately, I get the error

    /Users/me/projects/myproj/test/test_stuff.js:11
    var myProvider = _react.React.createElement(_index.MyProvider, null);
                                 ^

    TypeError: Cannot read property &#39;createElement&#39; of undefined
        at Object.&lt;anonymous&gt; (/Users/me/projects/myproj/test/test_stuff.js:7:7)

What does that mean? I am importing React from &#39;react&#39; successfully, so why would React be undefined? It is _react.React, whatever that means...

React JSX file giving error &quot;Cannot read property &#39;createElement&#39; of undefined&quot;

I have been playing around with React and have the following time component that just renders `Date.now()` to the screen:

    import React, { Component } from &#39;react&#39;;
    
    class TimeComponent extends Component {
      constructor(props){
        super(props);
        this.state = { time: Date.now() };
      }
      render(){
        return(
          &lt;div&gt; { this.state.time } &lt;/div&gt;
        );
      }
      componentDidMount() {
        console.log(&quot;TimeComponent Mounted...&quot;)
      }
    }
    
    export default TimeComponent;

What would be the best way to get this component to update every second to re-draw the time from a React perspective?

Update React component every second

I can&#39;t seem to find how to update query params with react-router without using `&lt;Link/&gt;`. `hashHistory.push(url)` doesn&#39;t seem to register query params, and it doesn&#39;t seem like you can pass a query object or anything as a second argument.

How do you change the url from `/shop/Clothes/dresses` to `/shop/Clothes/dresses?color=blue` in react-router without using `&lt;Link&gt;`? 

And is an `onChange` function really the only way to listen for query changes? Why aren&#39;t query changes automatically detected and reacted-to the way that param changes are?



How do you programmatically update query params in react-router?

How can I use react-router, and have a link navigate to a particular place on a particular page? (e.g. `/home-page#section-three`)

**Details**:

I am using `react-router` in my React app. 

I have a site-wide navbar that needs to link to a particular parts of a page, like `/home-page#section-three`.  

So even if you are on say `/blog`, clicking this link will still load the home page, with section-three scrolled into view. This is exactly how a standard `&lt;a href=&quot;/home-page#section-three&gt;` would work.

**Note**: The creators of react-router have not given an explicit answer. They say it is in progress, and in the mean time use other people&#39;s answers.  I&#39;ll do my best to keep this question updated with progress &amp; possible solutions until a dominant one emerges.

**Research**:

----
https://stackoverflow.com/questions/28893855/how-to-use-normal-anchor-links-with-react-router

This question is from 2015 (so 10 years ago in react time). The most upvoted answer says to use `HistoryLocation` instead of `HashLocation`.  Basically that means store the location in the window history, instead of in the hash fragment. 

Bad news is... even using HistoryLocation (what most tutorials and docs say to do in 2016), anchor tags still don&#39;t work.

----
https://github.com/ReactTraining/react-router/issues/394

A thread on ReactTraining about how use anchor links with react-router. This is no confirmed answer. Be careful since most proposed answers are out of date (e.g. using the &quot;hash&quot; prop in `&lt;Link&gt;`)

----

Use anchors with react-router

I am using the same component for three different routes:

    &lt;Router&gt;
        &lt;Route path=&quot;/home&quot; component={Home} /&gt;
        &lt;Route path=&quot;/users&quot; component={Home} /&gt;
        &lt;Route path=&quot;/widgets&quot; component={Home} /&gt;
    &lt;/Router&gt;
    
Is there anyway to combine it, to be like:
    
    &lt;Router&gt;
        &lt;Route path=[&quot;/home&quot;, &quot;/users&quot;, &quot;/widgets&quot;] component={Home} /&gt;
    &lt;/Router&gt;

Multiple path names for a same component in React Router

I&#39;m using the latest version of `react-router` (version ^3.0.0).

I wrote the following routing using ES5:

`routes.js`:

    var React = require(&quot;react&quot;);
    var Router = require(&quot;react-router&quot;);
    var AuthorPage = require(&#39;./components/authors/authorPage&#39;)
    var App = require(&#39;./components/app&#39;)
    var Route = Router.Route;
    
    var routes = (
    	&lt;Route path=&quot;/&quot; component={App}&gt;
    	    &lt;Route path=&quot;authors&quot; component={AuthorPage}/&gt;
    	 &lt;/Route&gt;
    );
    									 
    module.exports = routes;


In another JS file called `main.js` I perform the following call:

`main.js`:

    var React= require(&quot;react&quot;);
    var ReactDom = require(&quot;react-dom&quot;);
    var Router = require(&#39;react-router&#39;).Router;
    var routes = require(&#39;./routes&#39;);
    ReactDom.render(&lt;Router routes={routes}&gt;&lt;/Router&gt;, document.getElementById(&#39;app&#39;));

When I run the code I get the following exception in Google Chrome developer tools:

&gt; Uncaught TypeError: Cannot read property &#39;getCurrentLocation&#39; of
&gt; undefined

Why is that? What am I missing?

React-Router - Uncaught TypeError: Cannot read property &#39;getCurrentLocation&#39; of undefined

Here is the file that&#39;s causing me trouble:

    var Routers = React.createClass({
    
      getInitialState: function(){
        return{
          userName: &quot;&quot;,
          relatives: []
        }
      },
    
      userLoggedIn: function(userName, relatives){
        this.setState({
          userName: userName,
          relatives: relatives,
        })
      },
    
      render: function() {
        return (
          &lt;Router history={browserHistory}&gt;
            &lt;Route path=&quot;/&quot; userLoggedIn={this.userLoggedIn} component={LogIn}/&gt;
            &lt;Route path=&quot;feed&quot; relatives={this.state.relatives} userName={this.state.userName} component={Feed}/&gt;
          &lt;/Router&gt;
        );
      }
    });

I am trying to pass the new `this.state.relatives` and `this.state.userName` through the routes into my &quot;feed&quot;-component. But I&#39;m getting this error message:

&gt; Warning: [react-router] You cannot change &lt;Router routes&gt;; it will be
&gt; ignored

I know why this happens, but  don&#39;t know how else i&#39;m supposed to pass the states to my &quot;feed&quot;-component. I&#39;ve been trying to fix this problem for the past 5 hours and &#237;&#39;m getting quite desperate!

Please help!
Thanks


----------


SOLUTION:
---------

The answers below were helpful and i thank the athors, but they were not the easiest way to do this.
The best way to do it in my case turned out to be this:
When you change routes you just attach a message to it like this:

    browserHistory.push({pathname: &#39;/pathname&#39;, state: {message: &quot;hello, im a passed message!&quot;}});

or if you do it through a link:

    &lt;Link 
        to={{ 
        pathname: &#39;/pathname&#39;, 
        state: { message: &#39;hello, im a passed message!&#39; } 
      }}/&gt;

source: [https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/location.md][1]

In the component you are trying to reach you can then access the variable like this for example: 

      componentDidMount: function() {
        var recievedMessage = this.props.location.state.message
      },

I hope this helps! :)

  [1]: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/location.md


Content Type	Original Author	Original Content on Stackoverflow
Question	Kris MP	View Question on Stackoverflow
Solution 1 - Reactjs	vgrafe	View Answer on Stackoverflow
Solution 2 - Reactjs	krankuba	View Answer on Stackoverflow
Solution 3 - Reactjs	Robert Niestroj	View Answer on Stackoverflow

What is the trade off between history push and replace?

Reactjs Problem Overview

Reactjs Solutions

Solution 1 - Reactjs

Solution 2 - Reactjs

Solution 3 - Reactjs

How to add a builtin function in a GCC plugin?

DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )" How does that work?

Attributions