Results 1 to 6 of 6

Thread: reactor-webpack-plugin and react-router-dom

  1. #1
    Sencha User
    Join Date
    Jul 2017
    Posts
    52
    Answers
    2

    Default Answered: reactor-webpack-plugin and react-router-dom

    I used yeoman to create my app and it set up my app to use react-router-dom to navigate which is great and works well with single-level routes. My app however, seems to break on multilevel routes like '/audits/:id'.

    These work fine on navigation, ie; I go to localhost:8080 and navigate to localhost:8080/audit/1010 but if I reload the browser or go directly to localhost:8080/audit/1010 it won't load the css and html as per the screenshot here:



    I know that kitchensink has gotten around this using HashRouter instead of BrowserRouter but I am hoping to use BrowserRouter instead. Perhaps there is a setting I can add to webpack.config.js for the ExtReactWebpackPlugin?

  2. Ah, I see. To fix this you just need to add the following to the output config in webpack:

    Code:
    publicPath: '/'
    Keep in mind that you may need to set this to a build/environment variable if it's possible to deploy your site on a non-root path.

    I've updated the repo to reflect this.

  3. #2
    Sencha User
    Join Date
    Jul 2017
    Posts
    52
    Answers
    2

    Default

    I am wondering if this post has been missed? I would love some help with this.

  4. #3
    Sencha User Mark.Brocato's Avatar
    Join Date
    Mar 2015
    Location
    Maryland
    Posts
    482
    Answers
    114

    Default

    Yes it was. I looked at this when it was first posted, realized I needed to do some digging, and got distracted. Thanks for reminding me .

    I think all you really need to do is set contentBase: './build' in the webpack dev server settings. Here's a simple project that works with browser history:

    https://github.com/markbrocato/ext-r...-basic-example

  5. #4
    Sencha User
    Join Date
    Jul 2017
    Posts
    52
    Answers
    2

    Default

    Hi Mark. You're right in that project does use BrowserRouter, however the above problem still exists because I am trying to set up my route paths with multiple layers to get params into the url. To demonstrate in the example you have provided:

    change
    <Route exact path='/address' component={Address} />
    to
    <Route exact path='/address/extralayer' component={Address} />

    You will note that this will break the page if you manually type in http://localhost:8080/address/folder for the reasons mentioned above.

    Yes, you can navigate within the browser to that page with <Link to="/address/extralayer"> but if you try to reload the page or copy and paste the url you will not be able to load the page.

    Hopefully that extra explanation makes more sense.

  6. #5
    Sencha User Mark.Brocato's Avatar
    Join Date
    Mar 2015
    Location
    Maryland
    Posts
    482
    Answers
    114

    Default

    Ah, I see. To fix this you just need to add the following to the output config in webpack:

    Code:
    publicPath: '/'
    Keep in mind that you may need to set this to a build/environment variable if it's possible to deploy your site on a non-root path.

    I've updated the repo to reflect this.

  7. #6
    Sencha User
    Join Date
    Jul 2017
    Posts
    52
    Answers
    2

    Default

    Perfect, thanks Mark!

Similar Threads

  1. ext-react vs. ext-reactor
    By BennievanderWel in forum Q&A
    Replies: 2
    Last Post: 24 Aug 2017, 10:47 PM
  2. Replies: 9
    Last Post: 16 Jun 2017, 7:54 AM
  3. Reactor Webpack & TypeScript
    By jsheely in forum Q&A
    Replies: 9
    Last Post: 31 May 2017, 11:45 AM
  4. Replies: 0
    Last Post: 26 May 2017, 8:36 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •