CODEWITHSUNDEEP
reactjsreact-router
droledenom
droledenom

Reputation: 157

Combing React Router and Redux made my redirection KO

I have to combine use of Redux and React Router. I tried react Router alone first and when I was clicking my images I was correctly redirected.

I followed redux tutorial and now when I click my images, I change the address (ex: http://localhost:3000/contact) but nothing displays as if the component was empty.

Root.js

import React from 'react';
import './index.css';
import PropTypes from 'prop-types'
import ReactDOM, { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom'
import App from './App'
import Users from './users'
import Book from './Book'
import Notfound from './notfound'

import { Provider } from 'react-redux';
import Store from './redux/Store/store'

import * as serviceWorker from './serviceWorker';

const Root = ({ store }) => (
    <Provider store = { Store }>
      <Router>
        <div>
          <Switch>
              <Route exact path="/:filter?" component={App} />
              <Route path="/users" component={Users} />
              <Route path="/book" component={Book} />  
              <Route path='/manual' component={() => { window.location = 'https://------'; return null;} }/>
              <Route path='/contact' component={() => { window.location = 'https://-------'; return null;} }/>
              <Route component={Notfound} />
          </Switch>
        </div>
      </Router>
    </Provider>
)

Root.propTypes = {
  store: PropTypes.object.isRequired
}
serviceWorker.unregister();
export default Root

index.js:

import React from 'react'
import { render } from 'react-dom'
import { createStore } from 'redux'
import myReducer from './redux/Reducers/myReducer'
import Root from './Root'

const store = createStore(myReducer)

render(<Root store={store} />, document.getElementById('root'))

App.js:

import React from 'react'
import { Route, Link, Redirect, withRouter, BrowserRouter as Router } from 'react-router-dom'
import logo from './images/logo.png';
import book from './images/book.png';

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      date: new Date()
    };
  }

  render() {
    const { date } = this.state;
    return (
      <div>
          <img src={logo} />
          <img src={book} onClick={() => this.props.history.push('/book')}/>
          <img src={call} onClick={() => this.props.history.push('/contact')}/>
      </div>
    )
  }

}
export default App

Do you know what is wrong ?

Upvotes: 0

Views: 37

Answers (1)

Linschlager
Linschlager

Reputation: 1639

A few things I noticed:

When using react router you shouldn't use window.location to redirect since this reloads the whole page. The <Redirect> component from react-router is a better choice here.

Also you shouldn't use the component prop on the <Route>-component for things that aren't actually components, as there's the render prop for that (more on that here).

Furthermore: <Route exact path="/:filter?" component={App} /> is not going to work since :filter? is looking for a variable and exact is looking for an exact match. Moreover you probably shouldn't put the flexible one first since it's going to match every route that you throw at it. So all the following routes are practically unreachable.

Upvotes: 1

Related Questions