reactjs - cannot read property history because it's undefined but it is -

i getting error cannot read property history defined it.

this used work when had in main.jsx in client folder stops working.

the app file in imports folder.

import { router, route, switch, redirect } "react-router-dom"; import createbrowserhistory "history/createbrowserhistory";  const history = createbrowserhistory();  // app component - represents whole app export class app extends component {   constructor(props) {     super(props);   }    render() {     return (       <div classname="container">          <router history={history}>           <switch>             <route path="/" exact component={home} />             <route               path="/dashboard"               render={() =>                 this.props.currentuser ? <dashboard /> : <nopermission />}             />             <route path="/test" component={test} />             <route component={notfound} />           </switch>         </router>       </div>     );   } } 

more info:

import createbrowserhistory "history/createbrowserhistory";

within file createbrowserhistory default export.

export.default = createbrowserhistory; 

when trying browserrouter instead of router , deleting history const , props following error in console.

modules.js:26944 uncaught typeerror: cannot read property 'history' of undefined     @ link.render (modules.js?hash=b38005f7c50b72cb1ea0945090b4ba307f31282f:26944)     @ modules.js?hash=b38005f7c50b72cb1ea0945090b4ba307f31282f:18399     @ measurelifecycleperf (modules.js?hash=b38005f7c50b72cb1ea0945090b4ba307f31282f:17679)     @ reactcompositecomponentwrapper._rendervalidatedcomponentwithoutownerorcontext (modules.js?hash=b38005f7c50b72cb1ea0945090b4ba307f31282f:18398)     @ reactcompositecomponentwrapper._rendervalidatedcomponent (modules.js?hash=b38005f7c50b72cb1ea0945090b4ba307f31282f:18425)     @ reactcompositecomponentwrapper.performinitialmount (modules.js?hash=b38005f7c50b72cb1ea0945090b4ba307f31282f:17965)     @ reactcompositecomponentwrapper.mountcomponent (modules.js?hash=b38005f7c50b72cb1ea0945090b4ba307f31282f:17861)     @ object.mountcomponent (modules.js?hash=b38005f7c50b72cb1ea0945090b4ba307f31282f:10622)     @ reactdomcomponent.mountchildren (modules.js?hash=b38005f7c50b72cb1ea0945090b4ba307f31282f:16977)     @ reactdomcomponent._createinitialchildren (modules.js?hash=b38005f7c50b72cb1ea0945090b4ba307f31282f:14176) 

when using browserrouter in main.jsx can working. can change url's new views not render. think there still wrong history. in case have not defined not receiving errors. way how can check or fix this?

import react "react"; import { meteor } "meteor/meteor"; import { render } "react-dom"; import "../imports/startup/accounts-config.js";  import app "../imports/layouts/app.jsx"; import test "../imports/test.jsx"; import { browserrouter } "react-router-dom";  meteor.startup(() => {   render(     <browserrouter>       <app />     </browserrouter>,     document.getelementbyid("render-target")   ); }); 

going further on kyle's answer added withrouter test component.

import react, { component } "react"; import proptypes "prop-types"; import { withrouter } "react-router";  class test extends component {   static proptypes = {     match: proptypes.object.isrequired,     location: proptypes.object.isrequired,     history: proptypes.object.isrequired   };    render() {     const { match, location, history } = this.props;      return (       <div>         <p>this test</p>         <p>           @ {location.pathname}         </p>       </div>     );   } }  export default withrouter(test); 

i using navlinks link route in navigation bar component.

   <navlink to="/test" activeclassname="active">           test         </navlink> 

however clicking links not render test page. (the address in url bar change). when press refresh in browser page loads , location.pathname shows proper location.

if remove withrouter functionality same.

i got working not using component nest router in. if can explain me why appreciate it.

import navbar "../components/navbar.jsx"; import accountsuiwrapper "../components/accountsuiwrapper.jsx";  //import pages import home "../pages/home.jsx"; import dashboard "../pages/dashboard.jsx"; import test "../test.jsx"; import notfound "../pages/notfound.jsx"; import nopermission "../pages/nopermission.jsx";  let currentuser = meteor.user();  const app = () =>   <router>     <div>       <navbar currentuser={currentuser} />        <accountsuiwrapper />        <p>         {currentuser ? currentuser._id : "current user id not found"}       </p>        <switch>         <route exact path="/" component={home} />         <route           path="/dashboard"           render={() => (currentuser ? <dashboard /> : <nopermission />)}         />         <route path="/test" component={test} />         <route component={notfound} />       </switch>     </div>   </router>;  export default app; 

react router 4 has history baked it. can see documentation browserrouter, hashrouter, , memoryrouter there no argument history.

if access history in react router v4 should use withrouter hoc on component wish have access in. withrouter make ({match, history, location }) available inside component wraps.

as can see line of code: var _createbrowserhistory = require('history/createbrowserhistory'); line 13 in browserrouter.js , hashrouter.js history included you. included in memory router on line 9 of memoryrouter.js.

try changing import @ top import { browserrouter router, route, switch, redirect } "react-router-dom"; , remove history={ history } <router />.

edit: please take @ documentation react router 4. here basic example.

here post of code incase link ever goes dead.

import react 'react' import {   browserrouter router,   route,   link } 'react-router-dom'  const basicexample = () => (   <router>     <div>       <ul>         <li><link to="/">home</link></li>         <li><link to="/about">about</link></li>         <li><link to="/topics">topics</link></li>       </ul>        <hr/>        <route exact path="/" component={home}/>       <route path="/about" component={about}/>       <route path="/topics" component={topics}/>     </div>   </router> )  const home = () => (   <div>     <h2>home</h2>   </div> )  const = () => (   <div>     <h2>about</h2>   </div> )  const topics = ({ match }) => (   <div>     <h2>topics</h2>     <ul>       <li>         <link to={`${match.url}/rendering`}>           rendering react         </link>       </li>       <li>         <link to={`${match.url}/components`}>           components         </link>       </li>       <li>         <link to={`${match.url}/props-v-state`}>           props v. state         </link>       </li>     </ul>      <route path={`${match.url}/:topicid`} component={topic}/>     <route exact path={match.url} render={() => (       <h3>please select topic.</h3>     )}/>   </div> )  const topic = ({ match }) => (   <div>     <h3>{match.params.topicid}</h3>   </div> )  export default basicexample