Reputation: 6031

react-router.min.js:1 Uncaught TypeError: Cannot read property 'location' of undefined

 
 <!-- Included Script --> 
 <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
 <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
 <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
 <script src="https://unpkg.com/react-router/umd/react-router.min.js"></script>
  
    
	<div id="root"></div>
	
    <script type="text/babel">	
		
		var Router = ReactRouter.Router;
        var Route = ReactRouter.Route;
        var IndexRoute = ReactRouter.IndexRoute;
        var Link = ReactRouter.Link;
        var browserHistory = ReactRouter.browserHistory;

        class Page extends React.Component {
          
            render() {
                return (
                     <div>
                         <Link to='/about'>India </Link>
                     </div>
                );
            }
        }

        class About extends React.Component {
          
            render() {
                return (
                        <div>
                            to Router
                        </div>
                );
            }
        }

        class NoMatch extends React.Component {
          
            render() {
                return (
                        <div>
                           No page found
                        </div>
                );
            }
        }

        ReactDOM.render(
            <Router>
                <Route path="/" component={Page}>
                    <Route path="about" component={About}/>
                    <Route path="*" component={NoMatch}/>
                </Route>
            </Router>,
            document.getElementById('root')
        );

    </script>

It always give me 'location' of undefined error. Have tried slimier answers in other posts but it still not working for me.

Can any one help me to solve this issue?

Thanks in advance.

Upvotes: 0

Answers (3)

Scot Matson

Reputation: 745

You said you are using v4 in a comment... so a couple things immediately stand out and yes that type of information is super important to getting a correct answer.

Your <App/> needs to be wrapped around the router object as noted in the documentation.

https://reacttraining.com/react-router/web/api/Router

<Router>
    <App/>
</Router>

If you are using v4, you do not need to pass in history... like, <Router history={...}, this is handled for you. You simply need to have installed the history package... so in your case find a CDN for it.

You multiple routes should be placed within a <Switch/>.

https://reacttraining.com/react-router/web/api/Switch

<Switch>
    <Route/>
    <Route/>
    ...
</Switch>

This is how v4 more or less determines which route to select, similar to running a switch statement as it may be.

Start with that or consider a v3 cdn.

You should take the time to read this documentation thoroughly. The React Router team has phenomenal documentation that is easy to follow and implement into toy projects as well as production ready Redux or Relay applications.

https://reacttraining.com/react-router/web/guides/philosophy

Upvotes: 2

btzr

Reputation: 2154

React-router-dom

Use react-router-dom ( DOM bindings for React Router)

Install

<script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>

Use

Just use ReactRouterDOM instead of ReactRouter:

var Router = ReactRouterDOM.BrowserRouter;
var Route = ReactRouterDOM.Route;
var Link = ReactRouterDOM.Link;

You can find the library on window.ReactRouterDOM.

github/react-router-dom

Basic Example

<Router>
  <div>
    <Route exact path="/" component={Home}/>
    <Route path="/news" component={NewsFeed}/>
  </div>
</Router>

https://reacttraining.com/react-router/web/api/Route

Upvotes: 7

Rinku Malik

Reputation: 71

I think you forgot to put history="browserHistory" in Router tag under ReactDom. <Router history={browserHistory}> <Route/> </Router>