javascript - React Router Redux - Component never renders -


i'm trying latest react-router-redux (v5) working, never renders component. 1 gets rendered home (/). breakpoints in other routes components never hit. i've removed connect(mapstatetoprops, mapdispatchtoprop)(component) call (and did simple component) - still nothing rendered.

the route in browser bar changes. if import projects in index.js, rid of routing , nav, renders fine.

i've copy pasted documentation @

https://github.com/reacttraining/react-router/tree/master/packages/react-router-redux

unless there incompatibility i'm not aware of?

the code

packages.json

"react": "15.5.4", "react-dom": "15.5.4", "history": "^4.6.3", "isomorphic-fetch": "^2.2.1", "prop-types": "^15.5.10", "react-redux": "^5.0.6", "react-router": "^4.1.2", "react-router-redux": "^5.0.0-alpha.6", "redux": "^3.7.2", "redux-logger": "^3.0.6", "redux-thunk": "^2.2.0",

/index.js

import { router, route, indexroute, browserhistory } 'react-router'; import { connectedrouter, routerreducer, routermiddleware, push } 'react-router-redux' import createhistory 'history/createbrowserhistory'  import react 'react' import { render } 'react-dom'  import { createstore, applymiddleware, combinereducers} 'redux' import { provider } 'react-redux'  import thunkmiddleware 'redux-thunk'; import { createlogger } 'redux-logger';   let routes = require('./routes').routes; import reducers './reducers'  const history = createhistory(); const routermiddle = routermiddleware(history);  const store = createstore(     combinereducers({         ...reducers,         router: routerreducer     },     applymiddleware(         routermiddle,         thunkmiddleware,         createlogger()     )) )  render(         <provider store={store}>                 <connectedrouter history={history} >                   {routes}                 </connectedrouter>                   {/* <projects /> <-- works if comment out connectedrouter */}         </provider>         ,         document.getelementbyid('react-app')     );

/routes.js

import * react 'react'; import { route } 'react-router'; import { layout } './components/layout'; import { home } './components/home'; import { projects } './components/projects';  export const routes = <layout>     <route exact path='/' component={ home } />     <route path='projects' component={ projects } /> </layout>;

/components/projects.js

import react, { component } 'react'; import { connect } 'react-redux';  class projects extends component {   render() {     //debugger;     return (       <div>woe me</div>     )   } }  export default projects;

also, can see actions being dispatched route changes:

enter image description here

i think had similar issue when upgraded react-router v4 , have solved using withrouter in root component. 

export default (   <router history={history} onupdate={logpageview}>       <root>           <switch>             <route exact path="/" component={home} />             <route path="/about" component={about} />             <route path="/calculator" component={calc} />             <route path="/how-it-works" component={howitworks} />             <route path="/get-landed" component={getlanded} />             <route status={404} path="*" component={home} />           </switch>       </root>     </router> );

if don't have root component try on components of routes.

import { withrouter } 'react-router' class root extends react.component {   ... }  // create new component "connected" (to borrow redux // terminology) router. export default const rootwithrouter = withrouter(root)

here few other links inspired from:


Comments

Post a Comment

Popular posts from this blog

Is there a better way to structure post methods in Class Based Views -

i'm using class based views in django , never specify url in ajax calls , omit action parameter in form because know these requests go through post method of class based view. notice view - profile page make many requests depending on user updating on page - post method become convoluted , if/else mess example: def post(self, request, *args, **kwargs): # handle user changing available date if request.post.get('availabledate') != none: self.updateavailabledate(request) return jsonresponse({'result':'success'}) if request.post.get('newprojectname') != none: creative_user = creativeuserprofile.objects.get(id = request.user.id) project = project.create_project(creative_user, request.post['newprojectname']) project.save() return jsonresponse({'projectid': project.id }) if request.post.get('projectimage') != none , request.files['file']: proj
Read more

performance - Why is XCHG reg, reg a 3 micro-op instruction on modern Intel architectures? -

i'm doing micro-optimization on performance critical part of code , came across sequence of instructions (in at&t syntax): add %rax, %rbx mov %rdx, %rax mov %rbx, %rdx i thought had use case xchg allow me shave instruction , write: add %rbx, %rax xchg %rax, %rdx however, dimay found agner fog's instruction tables , xchg 3 micro-op instruction 2 cycle latency on sandy bridge, ivy bridge, broadwell, haswell , skylake. 3 whole micro-ops , 2 cycles of latency! 3 micro-ops throws off 4-1-1-1 cadence , 2 cycle latency makes worse original in best case since last 2 instructions in original might execute in parallel. now... cpu might breaking instruction micro-ops equivalent to: mov %rax, %tmp mov %rdx, %rax mov %tmp, %rdx where tmp anonymous internal register , suppose last 2 micro-ops run in parallel latency 2 cycles. given register renaming occurs on these micro-architectures, though, doesn't make sense me done way. why wouldn't register renamer
Read more

jquery - Responsive Navbar with Sub Navbar -

good day, forgive me nav vocabulary not best. if question confusing apologize. i'm working on navigation bar needs centered on page @ 768px , above. items in nav open (or perhaps toggle) subnav lives directly below. these nav should appear centered on page. i have been able work through responsive portion of nav bar, having main items align vertically , sub nav menu of each item roll out below, , gave them indent separation. working well. however, issue not responsive side, behavior @ width greater 768px. happens toggling menu's sub navigation pushes other main items down page below sub nav. here's code: $(document).ready(function () { //stick in fixed 100% height behind navbar don't wrap $('#slide-nav.navbar-inverse').after($('<div class="inverse" id="navbar-height-col"></div>')); $('#slide-nav.navbar-default').after($('<div id="navbar-height-col"></d
Read more