I want to create simple example using React, React router 4, Redux.
But I'm stuck on rendering process.
Router User is rendering as normal but my Home view not.
Also I have no errors so I don't know were problem is.
Any help I would be very thankful.
Files:
index.js
import React from "react";
import { render } from "react-dom";
import { BrowserRouter as Router,Route,Link } from 'react-router-dom';
import { createStore,applyMiddleware } from "redux";
import thunk from "redux-thunk";
import rootReducer from "./reducers/rootReducer";
import { Provider } from"react-redux"
import { composeWithDevTools } from "redux-devtools-extension";
import { Home } from "./components/home/Home";
import { User } from "./components/user/User";
const store = createStore(
rootReducer,
composeWithDevTools(
applyMiddleware(thunk)
)
);
class App extends React.Component{
render(){
return(
<Provider store={store}>
<Router>
<div>
<Link to="/">Home</Link>
<Link to="/user">User</Link>
<Route exact path="/" component={Home}/>
<Route exact path="/user" component={User}/>
</div>
</Router>
</Provider>
);
}
}
render(<App/>,window.document.getElementById("app"));
rootReducer.js
import { combineReducers } from "redux";
import userReducer from "./userReducer";
export default combineReducers({
user:userReducer
});
userReducer.js
export default function User(state=[{name:'TMP'}],action={}){
switch (action.type){
default: return state
}
}
Home.js
import React from "react";
import {connect} from"react-redux"
import { withRouter } from 'react-router-dom'
class Home extends React.Component{
render(){
return(
<div>
TADAAAAA HOME
{user}
</div>
);
}
}
function mapStateToProps(state) {
return{
user:state.user
}
}
export default withRouter(connect(mapStateToProps)(Home))
user.js
import React from "react";
export class User extends React.Component{
render(){
return(
<div>
USER
</div>
);
}
}
import { Home } from "./components/home/Home";
should be:
import Home from "./components/home/Home";
Here you can learn about the differences of importing/exporting as default or not
Related
I am working at a project in which I must use only React class components and I am fetching data from an Apollo server.
The problem is that in Chrome is rendering only the Navbar.jsx. When I am navigating on one of the links nothing is on the screen. Also there is not any error in the console.
Could somebody help me?
Thanks!
This is Index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {
ApolloClient,
InMemoryCache,
ApolloProvider,
} from "#apollo/client";
import { HashRouter } from 'react-router-dom';
export const client = new ApolloClient({
uri: ' http://localhost:4000/',
cache: new InMemoryCache()
});
ReactDOM.render(
<React.StrictMode>
<HashRouter >
<ApolloProvider client={client}>
<App />
</ApolloProvider>
</HashRouter>
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
Here is App.js :
import React, { Component } from 'react'
import './App.css';
import { Switch, Route} from 'react-router-dom'
import Navbar from './Components/Navbar';
import Bikes from './Pages/Bikes';
import Books from './Pages/Books';
import { client } from './index';
import {GET_QUERY} from './GraphQl/Queries'
class App extends Component {
state={
currencies: [],
}
componentDidMount = async ()=>{
const response = await client.query({
query:GET_QUERY
})
this.setState({
currencies:response.data.currencies
})
}
render() {
return (
<div className="App">
<Navbar currencies={this.state.currencies}/>
<Switch>
<Route exact path="/bikes" component={Bikes} />
<Route exact path="/books" component={Books} />;
</Switch>
</div>
);
}
}
export default App;
Here is Navbar.jsx :
import React, { Component } from 'react'
import {Link} from 'react-router-dom'
import styled from 'styled-components'
import { withRouter } from 'react-router';
const StyledLink = styled(Link)`
`;
class Navbar extends Component {
render() {
return (
<nav>
<div>
<ul>
<li>
<StyledLink to="/bikes" replace>Bikes</StyledLink>
</li>
<li>
<StyledLink to="/books" replace>Books</StyledLink>
</li>
</ul>
</div>
</nav>
)
}
}
export default withRouter(Navbar)
and one of the pages, Bikes.jsx:
import React, { Component } from 'react'
import { client } from '../index'
import { GET_QUERY } from '../GraphQl/Queries'
import { CATEGORY_VAR } from '../GraphQl/Variables'
class Bikes extends Component {
state={
bikesArt: []
}
componentDidMount = async ()=>{
const response = await client.query({
query: GET_QUERY,
variables: CATEGORY_VAR
})
this.setState({
bikesArt:response.data.category.products
})
}
render() {
return (
<div>
<h1>Bikes</h1>
</div>
)
}
}
export default Bikes
Solved it. It was the CSS. The navbar was covering the only <h2> tag from the page
When pressing {Link} and changing Route, the header component NavBar keeps rerendering, even when is outside the Switch component from react-router-dom.
here are the files:
Main index.js file:
import React from 'react'
import styles from './styles.css'
import {Route, Switch} from 'react-router-dom'
import Home from './Home'
import Settings from './Settings'
import Layout from './Layout'
import Contact from './Contact'
import NavBar from 'App/components/NavBar'
export default class MainHome extends React.Component {
static propTypes = {}
render() {
return (
<div className={styles.container}>
<NavBar />
<Switch>
<Route path="/settings" component={Settings} />
<Route path="/contact" component={Contact} />
<Route path="/" component={Home} />
</Switch>
</div>
)
}
}
Home.js
import React from 'react'
import styles from './styles.css'
import {Link} from 'react-router-dom'
export default class Home extends React.Component {
static propTypes = {}
render() {
return (
<div className={styles.container}>
<h1>Hello world</h1>
<Link to="/contact">Contact</Link>
</div>
)
}
}
Contact.js
import React from 'react'
import styles from './styles.css'
import {Link} from 'react-router-dom'
export default class Contact extends React.Component {
static propTypes = {}
render() {
return (
<div className={styles.container}>
Contact
<Link to="/">Home</Link>
</div>
)
}
}
The current project is pretty simple: the index.js file has inside the Home and Contact components, and the NavBar component as a header outside the Switch.
#MattyJ I'm using react-router-dom#^4.2.1. The component with the Router looks like this:
import React from 'react'
import Root from 'App/Root'
import Pages from './Pages'
import {BrowserRouter} from 'react-router-dom'
export default class App extends React.Component {
render() {
return (
<BrowserRouter key={Math.random()}>
<Root>
<Pages />
</Root>
</BrowserRouter>
)
}
}
Pages encapsulates two components: App, where is located the Switch component from my question, and Auth for managing autentication:
import React from 'react'
import authRouteRegex from './Auth/routeRegex'
import {withRouter} from 'react-router'
import PropTypes from 'prop-types'
import DynamicComponent from 'App/components/DynamicComponent'
import App from './App'
#withRouter
export default class Pages extends React.Component {
static propTypes = {
location: PropTypes.object
}
render() {
if (authRouteRegex.test(this.props.location.pathname)) {
const Component = DynamicComponent(() => import('./Auth'))
return <Component />
}
return <App />
}
}
The translation only work on refresh. It seems because i have used a wrapper around the App.js that why its not working.
Also i tried to add a key to intlprovider the translation worked but now all my inner components get refresh.
Could there be a way to used reactintl when using an app wrapper without refreshing all inner components??
Below you can find the app.js, index.js and the app wrapper:
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import './styles/global.css';
import registerServiceWorker from './registerServiceWorker';
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import { Provider } from 'react-redux';
import rootReducer from './redux/rootReducers';
import AppWrapperContainer from './containers/appWrapperContainer/appWrapperContainer';
import {localeSet} from './redux/actions/localeActions';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(rootReducer, /* preloadedState, */ composeEnhancers(
applyMiddleware(thunk)
));
if(localStorage.H24Lang)
{
store.dispatch(localeSet(localStorage.H24Lang));
}
ReactDOM.render((
<Provider store={store}>
<AppWrapperContainer/>
</Provider>
),
document.getElementById('root'));
registerServiceWorker();
AppWrapperContainer.js
import React, { Component } from 'react';
import { IntlProvider, addLocaleData} from "react-intl";
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import messages from '../../messages';
import en from "react-intl/locale-data/en";
import fr from "react-intl/locale-data/fr";
import App from "../../App";
addLocaleData(en);
addLocaleData(fr);
class AppWrapperContainer extends Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
const {lang} = this.props
let locale =
(navigator.languages && navigator.languages[0])
|| navigator.language
|| navigator.userLanguage
|| lang
return (
// <IntlProvider locale={lang} messages={messages[lang]} key={lang}></IntlProvider>
<IntlProvider locale={lang} messages={messages[lang]} >
<App/>
</IntlProvider>
);
}
}
AppWrapperContainer.propTypes = {
lang: PropTypes.string.isRequired
}
//what reducer you need
function mapStateToProps(state) {
console.log("State is", state);
return {
lang: state.locale.lang
};
}
export default connect(mapStateToProps,null)(AppWrapperContainer);
App.js
import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Home from './screens/home/home';
import { connect } from 'react-redux';
import { BrowserRouter as Router, Route,Redirect, Switch } from 'react-router-dom';
class App extends Component {
constructor(props) {
super(props);
this.state = {
};
}
componentWillMount() {
}
componentDidMount() {
}
render() {
return (
<div className="App">
<Router>
<div className = "app-main-content">
<Route exact path='/' component={Home} />
</Router>
</div>
);
}
}
//what reducer you need
function mapStateToProps(state) {
return {
};
}
function mapDispatchToProps(dispatch) {
return {
};
}
export default connect(mapStateToProps, mapDispatchToProps)(App);
The key prop in IntlProvider forces React to remount the component (and all its children), but you just want them to be re-rendered (not remounted).
First confirm that your stored state is changing its locale/lang value as expected and that this change goes thougth mapStateToProps to your AppWrapperContainer component.
Then, make sure it is received in componentWillReceiveProps method and that a re-render is fired when its value changes. Then, all children will be re-rendered (if not blocked by shouldComponentUpdate method).
By the way, what is locale variable in AppWrapperContainer for?
I use react router and I can see Signup link on the screen
But when I press this link nothing heppends , Tell me why please.
Main.js
import ReactDOM from 'react-dom';
import React from 'react';
//import { Router, Route, hashHistory } from 'react-router';
import { BrowserRouter, Route } from 'react-router-dom'
import App from './components/App.jsx';
import WizardIndex from './components/WizardIndex.js';
ReactDOM.render(
<BrowserRouter>
<App path="/" component={App}>
<Route path="/signup" component={ WizardIndex }/>
</App>
</BrowserRouter>,
document.getElementById('mount-point')
);
App.jsx
import React from 'react';
import { Link } from 'react-router-dom';
const App = React.createClass({
render: function(){
return (
<div className='App'>
<div className='menu-bar'>
<div className='menu-item'>
<h3>App</h3>
<Link to='/signup'>Signup</Link>
</div>
<div className='content'>
{ this.props.children }
</div>
</div>
</div>
);
}
});
export default App;
WisardIndex.js
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { Values } from "redux-form-website-template";
import store from "./store";
import showResults from "./showResults";
import WizardForm from "./WizardForm";
const Index = React.createClass({
render(){
return (
<h3>123</h3>
);
}
});
export default Index;
I can not understand I setting up this.props.children in App.jsx. I include Route And Think everything doing by the rules, but nothing in the result
First of all first, if you can compile and run given source code then that means you are working with React's very old version that's because of there is no such thing as React.createClass anymore. Update it.
Second I think you misunderstood the concept of react-router-dom. That line contains <App path="/" ... effects nothing because of you cannot assign path nor component props to App. If you are rendering App component as a child of BrowserRouter that means "Im surrounding every route with one component and it's the App Component. App component should render every route as a child."
I'm assuming that you will create your components as Class Components then the right code would be like this :
Main.js :
import ReactDOM from 'react-dom';
import React from 'react';
//import { Router, Route, hashHistory } from 'react-router';
import { BrowserRouter, Route } from 'react-router-dom'
import App from './components/App.jsx';
import WizardIndex from './components/WizardIndex.jsx';
ReactDOM.render(
<BrowserRouter>
<App>
<Route path="/signup" component={ WizardIndex }/>
</App>
</BrowserRouter>,
document.getElementById('mount-point')
);
App.jsx :
import React from "react";
import { Link } from "react-router-dom";
class App extends React.Component {
render() {
const { children } = this.props;
return (
<div className="App">
<div className="menu-bar">
<div className="menu-item">
<h3>App</h3>
<Link to="/signup">Signup</Link>
</div>
<div className="content">{children}</div>
</div>
</div>
);
}
}
export default App;
WizardIndex.jsx :
import React from "react";
import ReactDOM from "react-dom";
class WizardIndex extends React.Component {
render() {
return <h3>123</h3>;
}
}
export default WizardIndex;
Actually i have written it for you in codesandbox, you can check the working code for your situation here:
https://codesandbox.io/s/rr1nv610wp
I'm using react-router v4.2.2 in my project, and am trying to create a set of cards that each link to other components. Right now I'm just testing that the router works, by routing each Card to one specific component called 'Project1'. This, however, is not working; I'm not seeing the div inside the Project1 component pop up. What am I doing wrong?? Shouldn't each Card link to the Project1 component?
Here is the code for the main container that holds the cards:
import React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import ProjectCard from '../components/project_card.js';
import Project1 from '../components/project1.js';
class ProjectCards extends React.Component {
render() {
var projectCards = this.props.projects.map((project, i) => {
return (
<div key={i}>
<Link to={`/${project.title}`}>
<ProjectCard title={project.title} date={project.date} focus={project.focus}/>
</Link>
</div>
);
});
return (
<div>{projectCards}</div>
);
}
}
function mapStateToProps(state) {
return {
projects: state.projects
};
}
export default connect(mapStateToProps)(ProjectCards);
Here is the code for the Routes container:
import React from 'react';
import Project1 from '../components/project1.js';
import { connect } from 'react-redux';
import { Route, Switch } from 'react-router-dom';
class Routes extends React.Component{
render() {
var createRoutes = this.props.projects.map((project, i) => {
return <Route key={i} exact path={`/${project.title}`} component={Project1}/>
});
return (
<Switch>
{createRoutes}
</Switch>
);
}
}
function mapStateToProps(state) {
return {
projects: state.projects
};
}
export default connect(mapStateToProps)(Routes);
Here is the code for the index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { applyMiddleware, createStore } from 'redux';
import ReduxPromise from 'redux-promise';
import { BrowserRouter } from 'react-router-dom';
import App from './components/App.jsx';
import css from '../style/style.css';
import style from '../style/style.css';
import reducers from './reducers';
const createStoreWithMiddleware = applyMiddleware(ReduxPromise)(createStore);
ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers)}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
, document.getElementById('root'));
and the code for Project1, which should display when a Card has been clicked:
import React from 'react';
const Project1 = () => {
return (
<div>hello there this is Project1</div>
);
}
export default Project1;
When you click on a link, you navigate to Project1, which has no Routes defined. You basically destroy your Route when you lick on it because the Switch is in the same component as the Link. The Switch statement needs to be moved to a 3rd component so that it still exists after clicking on a linking card.