CODEWITHSUNDEEP
reactjsreact-routerreact-router-v4react-router-dom
volna
volna

Reputation: 2610

React Router v4. Route not visible.

I was using router v3 and started refactoring the routing logic according to v4 in order to further implement transition-groups and came up with the following code. There is no error in while compiling or in the console, when I go to the /#/about it returns an empty page.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Store from './container/store/store';
import Container from './container/container';


const MOUNT_NODE = document.getElementById('root');

const render = () => {
  const store = Store({});

  ReactDOM.render(
      <Container store={store} />,
    MOUNT_NODE
  );
};


// Hot Module Replacement
if (module.hot) {
  module.hot.accept('./routes/index', () =>
    setImmediate(() => {
      ReactDOM.unmountComponentAtNode(MOUNT_NODE);
      render();
    })
    // This method is used to break up long running operations and run a callback function immediately after the browser has completed other operations such as events and display updates.
  );
};

render();


container.js (hooks up redux to the application)

import React, { Component, PropTypes } from 'react';
import { Provider } from 'react-redux';
import { HashRouter, Switch, Route } from 'react-router-dom';


// Wrap
import Wrap from '../wrap';
import Contact from '../routes/contact';


export default class Container extends Component {
  static propTypes = {
    store: PropTypes.object.isRequired
  }

  shouldComponentUpdate() {
    return false;
  }

  render() {
    const { store } = this.props;

    return (
      <Provider store={store}>
        <HashRouter>
          <Switch>
            <Route exact path='/' component={Wrap}/>
          </Switch>
          </HashRouter>
      </Provider>
    )
  }
}


wrap.js (works as index route)

import React, { Component } from 'react';
import Header from '../components/header';
import styles from './styles/styles.css';
import { HashRouter, Switch, Redirect, Route, BrowserRouter, Link} from 'react-router-dom';

import About from '../routes/about';


export default class Wrap extends Component {

  constructor(props) {
    super(props);
  }

  render () {

    return (
      <div>
        <Header location={this.props.location} />
        <Route path='/about' component={About}/>
        ... other stuff
      </div>
    )
  }
}

Upvotes: 0

Views: 495

Answers (1)

Ferry
Ferry

Reputation: 340

Omit the exact in your <Route path='/' />.

exact will only render the component with the given path.

Upvotes: 2

Related Questions