0

is possible to implement relative paths on https://name.github.io/project in React for gh-pages, using React Router, as I receive errors. I used import {withRouter} from 'react-router-dom'; and export default withRouter(componentName); to forward routing props from Router to targeting component, and I receive them. I tried implemented like this Links:

<li><Link to={{pathname: this.props.match.url + '/new-post'}}>New Post</Link></li>

and used this modality this.props.match.url to obtain current path, but I receive errors.

Has anybody some suggestions?

Ivana
  • 842
  • 2
  • 15
  • 33

1 Answers1

0

It can be configured in react router history:

history.js

import createBrowserHistory from 'history/createBrowserHistory';

const history = createBrowserHistory({
  basename: 'project',
});

export default history;
Dimitri Kopriwa
  • 13,139
  • 27
  • 98
  • 204
  • Where do I put REACT_APP_TEST_HOMEPAGE=http://name.github.io/project? and where should I import history.js, I suppose in component where the links are located? – Ivana Mar 03 '19 at 08:02
  • You don´t need to use the env, you can use a string, I personally did that in a create react app and my env where in `.env``. `history` is the core library react-router use to handle history. You should read about `browserHistory`, ` hashHistory`,`memoryHistory`. History should be passed to your router/switch – Dimitri Kopriwa Mar 03 '19 at 08:08
  • Have you any resource for learning browserHistory and hashHistory? I found this on you tube? https://www.youtube.com/watch?v=cdUyEou0LHg – Ivana Mar 03 '19 at 08:46
  • What about [history](https://www.npmjs.com/package/history) and [react-router](https://github.com/ReactTraining/react-router) documentation? – Dimitri Kopriwa Mar 03 '19 at 08:49
  • My package.json file was already set to "homepage": https://name.github.io/project. I installed npm history, I copied your history file in my history.js file. Made in it let siteName = 'https://name.github.io/project'; Replace in history.js process.env.REACT_APP_TEST_HOMEPAGE with process.env.siteName, saved, imported history.js in app, where my router is located, and included in it's not working. Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL 'https:' cannot be created in a document with origin 'https://name.git.. – Ivana Mar 03 '19 at 12:16
  • I though you were looking for hint, so now I have updated my answer and I also give you the link to the [basename](https://github.com/ReactTraining/history#using-a-base-url) documentation. – Dimitri Kopriwa Mar 03 '19 at 12:29
  • No, I was looking for an answer :) For me it's not working, I think it's an silly error of course :) I imported at the end import history from './history'; in App.js file where is my Router. Then I made history as property in Router , and nothing happens. NavLinks are not functioning. – Ivana Mar 03 '19 at 13:13
  • This should be enough to help you out, prepare a reproduction so you can get help. Use codesandbox.io and a hashHistory – Dimitri Kopriwa Mar 04 '19 at 07:31
  • Ok, I will append it on sandbox, and share here. Why to use hashHistory instead of browserHistory? – Ivana Mar 05 '19 at 08:10
  • Dimitri here is the link to sandbox example: https://codesandbox.io/s/m351vnzz8y. , header menu is not functioning. I have imported history in App.js file with import history from "./history". In like this .I receives props with this modality: to={{ pathname: props.match.url + "/name" }} in MenuHeader component by using withRouter HOC. – Ivana Mar 05 '19 at 12:01
  • 1
    To sum up, what you need is a router configured for the base path `/project`, this means a should bring to `/project/test`. You don't need to set the full path when setting the base. See https://stackoverflow.com/questions/38196448/can-i-set-a-base-route-in-react-router – Dimitri Kopriwa Mar 05 '19 at 14:45
  • Done, by injecting the basename into router. Thanks, Dimitri. Was it possible to do the same via history file? with Router v.4? – Ivana Mar 05 '19 at 17:39