Dealing with react-router not working as intended

  • Resolved afsheen001

    (@afsheen001)


    3 years, 7 months ago

    Hello, so i have a url/slug for the react-page which uses reactPress. What i want to be able to do is navigate through this url/slug/:another-slug, the another-slug can be anything and than catch that value in the react component. I am able to get this behaviour for routes using react-router but i think, reactPress or wordpress (not sure what is causing this) tries to find the another-slug as a file in the slug folder(which of course doesn’t exists because this slug could be anything that user types in) and gives a 404 error. I wanted to know if there’s a workaround to this problem or not. Thank you!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author rockiger

    (@rockiger)

    Hello @afsheen001,

    this is probably caused by build path in package.json.

    ReactPress changes the build command to somthing like:

    "PUBLIC_URL=/wp-content/reactpress/apps/routertest/build react-scripts build",

    I don’t know enough about the inner workings of react-router to tell you what the problem is. Maybe react router allows for some configuration.

    For now, you will have to investigate this or don’t use react-router. Without the build changed PUBLIC_URL images won’t work as expected.

    Edit: This doc looks promising: https://create-react-app.dev/docs/deployment/#building-for-relative-paths

    Best
    Marco

    • This reply was modified 3 years, 7 months ago by rockiger.
    • This reply was modified 3 years, 7 months ago by rockiger.
    Thread Starter afsheen001

    (@afsheen001)

    So, the build path goes till build folder in the wp. As in /wp-content/plugins/reactpress/apps/folder-name/build now the extra slug i.e. /:another-slug is not a folder or a file in the build folder. it’s used to just auto-fill a field and that work fine with react-router locally but not on wordpress, my question is, could the plugin allow something like this, as in i navigate to url/react-slug/another-dynamic-slug where the react-slug is the one set from reactpress plugin and another-dynamic-slug is something just exists in the url, and is not looked for in the build folder as that gives 404 page not found error? If not, than do you know any way in which i maybe able to achieve similar result?

    edit: thanks for the link attached.I’ll look into it

    Regards,
    Afsheen

    • This reply was modified 3 years, 7 months ago by afsheen001.
    • This reply was modified 3 years, 7 months ago by afsheen001.
    • This reply was modified 3 years, 7 months ago by afsheen001.
    Plugin Author rockiger

    (@rockiger)

    To fully use react-router you would probably need to configure your web server, that it doesn’t route the URL you would like to use.

    As an alternative, you could use search parameters instead of using path variables / subdirectories. I don’t know if you need to save that state in your URL?

    You could manage your views with a different way of state management. Like state hooks, redux, localstorage, etc.

    Plugin Author rockiger

    (@rockiger)

    BTW, the newest version of ReactPress provides custom routing. See the FAQ.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Dealing with react-router not working as intended’ is closed to new replies.