मैं थोड़ी देर के लिए इस से जूझ रहा हूं!प्रतिक्रिया-राउटर-रेडक्स और प्रतिक्रिया-बूटस्ट्रैप
मैं 'मुख्य ऐप कंटेनर' रखना चाहता हूं जिसमें हमेशा लोगो, नेविगेशन है ... मैं इसे सुंदर-बूटस्ट्रैप का उपयोग करना चाहता हूं।
पल मैं समस्याओं में चल रहा हूँ पर, अपने प्रोजेक्ट davezuko की "प्रतिक्रिया-redux स्टार्टर किट"
मैं प्रदाता अंदर रूट कंटेनर में मेरी बूटस्ट्रैप <NavBar> और <LinkContainers> के सभी डाल की कोशिश की पर आधारित है ।
सब कुछ दिखाता है और अच्छा लग रहा है लेकिन मेरे कोई भी लिंक काम नहीं करता है, और जब मैं नियमित प्रतिक्रिया-राउटर <Link> डालता हूं तो मैं एक ही समस्या में भाग लेता हूं।
मैं सोचा, ठीक है, विचारों जो मार्गों से कहा जाता है में काम लिंक, तो मैं के बाद निर्यात डिफ़ॉल्ट (स्टोर) => (
कोलाहल, eslint मार्गों में इस सब की नकल की और webpack इसकी अनुमति संकलित करने के लिए, लेकिन जब मैं पृष्ठ चलाता हूं तो इनमें से कोई भी दिखाई नहीं देता है, और जब मैं प्रतिक्रिया-देव कंसोल देखता हूं, तो ये प्रतिक्रिया नोड भी प्रकट नहीं होते हैं।
मेरे पास यह है, रूट.जेएस:
import React, { PropTypes } from 'react';
import { Provider } from 'react-redux';
import { Router } from 'react-router';
import { IndexLink, Link } from 'react-router';
import NavBar from 'react-bootstrap/lib/Navbar';
import Nav from 'react-bootstrap/lib/Nav';
import NavItem from 'react-bootstrap/lib/NavItem';
import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
export default class Root extends React.Component {
static propTypes = {
history: PropTypes.object.isRequired,
routes: PropTypes.element.isRequired,
store: PropTypes.object.isRequired
};
get content() {
return (
<Router history={this.props.history}>
{this.props.routes}
</Router>
);
}
get devTools() {
if (__DEBUG__) {
if (__DEBUG_NEW_WINDOW__) {
if (!window.devToolsExtension) {
require('../redux/utils/createDevToolsWindow').default(this.props.store);
} else {
window.devToolsExtension.open();
}
} else if (!window.devToolsExtension) {
const DevTools = require('containers/DevTools').default;
return <DevTools />;
}
}
}
render() {
const styles = require('./../containers/Root.scss');
return (
<Provider store={this.props.store}>
<div>
<div className={styles.Root}>
<Link to='login'>login</Link>
<NavBar fixedTop>
<NavBar.Header>
<NavBar.Brand>
<IndexLink to='/' activeStyle={{color: '#33e0ff'}}>
<div className={styles.brand}></div>
<span>Hero Energy Solutions</span>
</IndexLink>
</NavBar.Brand>
<NavBar.Toggle />
</NavBar.Header>
<NavBar.Collapse eventKey={0}>
<Nav navbar>
<LinkContainer to='/chat'>
<NavItem eventKey={1}>Chat</NavItem>
</LinkContainer>
<LinkContainer to='/widgets'>
<NavItem eventKey={2}>Widgets</NavItem>
</LinkContainer>
<LinkContainer to='/survey'>
<NavItem eventKey={3}>Survey</NavItem>
</LinkContainer>
<LinkContainer to='/about'>
<NavItem eventKey={4}>About Us</NavItem>
</LinkContainer>
<LinkContainer to='/'>
<NavItem eventKey={5}>Login</NavItem>
</LinkContainer>
</Nav>
</NavBar.Collapse>
</NavBar>
</div>
{this.content}
{this.devTools}
</div>
</Provider>
);
}
}
रूट्स.जेएस:
import React from 'react';
import { Route, IndexRoute } from 'react-router';
import CoreLayout from 'layouts/CoreLayout/CoreLayout';
import HomeView from 'views/HomeView/HomeView';
import LoginView from 'views/LoginView/LoginView';
import NotFoundView from 'views/NotFoundView/NotFoundView';
import RestrictedView from 'views/RestrictedView/RestrictedView';
import AboutView from 'views/AboutView/AboutView';
import { IndexLink, Link } from 'react-router';
import NavBar from 'react-bootstrap/lib/Navbar';
import Nav from 'react-bootstrap/lib/Nav';
import NavItem from 'react-bootstrap/lib/NavItem';
import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
import {UserAuthWrapper} from 'redux-auth-wrapper';
import {routerActions} from 'react-router-redux';
const CheckAuth = UserAuthWrapper({
authSelector: (state) => state.user, // how to get the user state
redirectAction: routerActions.replace, // the redux action to dispatch for redirect
wrapperDisplayName: 'CheckAuth', // a nice name for the auth check
failureRedirectPath: 'login' // default anyway but meh!
});
export default (store) => (
<div>
<Route path='/' component={CoreLayout}>
<IndexRoute component={HomeView} />
<Route path='login' component={LoginView} />
<Route path='home' component={HomeView} />
<Route path='about' component={AboutView} />
<Route path='restricted' component={CheckAuth(RestrictedView)} />
</Route>
<Route path='*' component={NotFoundView}/>
</div>
);
मुझे यकीन नहीं है कि यह बहुत मददगार है, लेकिन यहां प्रतिक्रिया कंसोल के साथ क्लाइंट पक्ष का एक स्क्रीन शॉट है।
