reactjs: not able to make router work

Question

I am having the following index.html. I am trying to use router.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Twitter API</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/4.2.2/react-router-dom.min.js"></script>
  </head>

  <body>
    <div id="root"></div>

  <script type="text/babel">

    class Module extends React.Component {
      constructor(props) {
          super(props);
      }

      render() {
          return (
            <div>
            <p>This is Module</p>
            </div>

          );
        }
      }

  class Basic extends React.Component {
      constructor(props) {
        super(props);
      }
      render() {
        return (
          <ReactRouterDOM.Router>
            <ReactRouterDOM.Route exact path="/" component={Module} />
          </ReactRouterDOM.Router>
          )
      }
    }

  ReactDOM.render(
      <Basic />,
      document.getElementById('root')
  );
  </script>
  </body>
</html>

I am getting the following error: How to overcome this

Uncaught TypeError: Cannot read property 'location' of undefined
    at new n (react-router-dom.min.js:1)
    at react-dom.js:4749
    at measureLifeCyclePerf (react-dom.js:4529)
    at ReactCompositeComponentWrapper._constructComponentWithoutOwner (react-dom.js:4748)
    at ReactCompositeComponentWrapper._constructComponent (react-dom.js:4734)
    at ReactCompositeComponentWrapper.mountComponent (react-dom.js:4642)
    at Object.mountComponent (react-dom.js:11542)
    at ReactCompositeComponentWrapper.performInitialMount (react-dom.js:4825)
    at ReactCompositeComponentWrapper.mountComponent (react-dom.js:4712)
    at Object.mountComponent (react-dom.js:11542)

https://stackoverflow.com/questions/42892488/react-router-v4-0-0-uncaught-typeerror-cannot-read-property-location-of-unde?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa Read that answer. I think it will help you solve issues. — ivica.moke, Mar 28 '18 at 11:54
Ok. Now it worked i am using: ReactRouterDOM.BrowserRouter. But I am presently using http://localhost/~user/index.html. Now its showing nothing. — Santhosh, Mar 28 '18 at 11:59
i don't se anywhere that you have defined route for /user, just root route '/'. try to go to localhost:port — ivica.moke, Mar 28 '18 at 12:03
I mean my file index.html is located at /home/public_html. I am serving the page using apache webserver. So http://localhost/~user/index.html — Santhosh, Mar 28 '18 at 12:04

Gabriele Petrioli · Accepted Answer · 2018-03-28T12:05:20.307

0

You need to use BrowserRouter and you need to set the basename property if your page is not running from the root (and you want to use / paths)

  <ReactRouterDOM.BrowserRouter basename="/~user/">
    <ReactRouterDOM.Route exact path="/" component={Module} />
  </ReactRouterDOM.BrowserRouter>

edited Mar 28 '18 at 12:05

answered Mar 28 '18 at 11:57

Gabriele Petrioli

191,379
34
261
317

It worked now. But the problem is i am serving the index.html from apache webserver. So how can i combine react router and apache url – Santhosh Mar 28 '18 at 12:03
@SanthoshYedidi you need to set the `basename` for this. Updated answer – Gabriele Petrioli Mar 28 '18 at 12:05
as i mentioned there are many other files (.php files) being servered from "/~user/" I want https://localhost/~user/index.html to be the base and all the urls to start from there. Like i have then it should point to https://localhost/~user/index.html/test I know the url looks rediculous. What is the best way to do this. – Santhosh Mar 28 '18 at 12:15
@SanthoshYedidi that is what the `basename` does. It only affects the react `BrowserRouter`. – Gabriele Petrioli Mar 28 '18 at 12:18
1

then the base name should be "/~user/index.html" – Santhosh Mar 28 '18 at 12:22
ah yes.. now i got what you meant. – Gabriele Petrioli Mar 28 '18 at 12:26
but if i use /~user/index.html in basename its not working. – Santhosh Mar 28 '18 at 12:28
Tried with a `/` at the end ? like `/~user/index.html/` – Gabriele Petrioli Mar 28 '18 at 12:48
`basename="/~user/index.html/"` and `exact path="/"` and `path="/topic/:slug"` If i try: `localhost/~user/index.html/` works but `localhost/~user/index.html/topic/test` does not work. It shows `Error 404, The requested `URL was not found on this server. – Santhosh Mar 28 '18 at 13:05
@SanthoshYedidi to use browser router you need to config your server send all urls to the index.html. Otherwise use the `HashRouter` – Gabriele Petrioli Mar 28 '18 at 13:15
Yes. I have now decided to use hashrouter – Santhosh Mar 28 '18 at 13:44

reactjs: not able to make router work

1 Answers1