CODEWITHSUNDEEP
javascriptreactjsroutesreact-router
DanilGholtsman
DanilGholtsman

Reputation: 2374

React & HashRouter - got blank pages

After I setted up routing on client side by react-router-dom all I got it's just blank empty pages.

enter image description here

So, my setup is here. I bet something is wrong but I can't get it.

So how come? What's wrong?

Index:

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import {
    HashRouter as Router,
    Route,
    Link
} from 'react-router-dom'

import App from './containers/app.js';
import configureStore from './store/configureStore';
import routes from './routes';

const store = configureStore();

ReactDOM.render(
    <Provider store={store}>
        <Router routes={routes} />
    </Provider>,
    document.getElementById("content")
);

Routes are here:

import React from 'react';
import ReactDOM from 'react-dom';
import {
    HashRouter as Router,
    Route,
    Link
} from 'react-router-dom';

import App from './containers/app.js';
import Settings from './components/settings/settings.js';
import NotFound from './components/common/notfound';

export default (
    <Route exact path="/" component={App}>
        <Route exact path="/settings" component={Settings} />
        <Route path="*" component={NotFound} />
    </Route>
)

Upvotes: 0

Views: 3184

Answers (1)

Win
Win

Reputation: 2133

Try to change this section to:

ReactDOM.render(
    <Provider store={store}>
    <Router>
      <Route exact path="/" component={App}>
        <Route exact path="/settings" component={Settings} />
        <Route path="*" component={NotFound} />
      </Route>
    </Router>
    </Provider>,
    document.getElementById("content")
);

I don't think react-router v4 recognizes this part: <Router routes={routes} />

Revised: There are two problems with the above codes.

1) You should not place a subroute inside a route. This part is incorrect:

<Route exact path="/" component={App}>
  <Route exact path="/settings" component={Settings} />
  <Route path="*" component={NotFound} />
</Route>

2) <NotFound /> is always rendered no matter what the path is.

Solution:

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import {
    HashRouter as Router,
    Route,
    Link,
} from 'react-router-dom'

import App from './containers/app.js';
import configureStore from './store/configureStore';
import routes from './routes';

const store = configureStore();

ReactDOM.render(
    <Provider store={store}>
        <Router>
          <Route path="/" component={App} />
        </Router>
    </Provider>,
    document.getElementById("content")
);

App.js

Insert this codes to where you want to render the contents:

<Switch>
   <Route exact path="/" component={Home} />
   <Route exact path="/settings" component={Settings} />
   <Route path="*" component={NotFound} />
</Switch>

Do not forget to add import {Switch, Route} from 'react-router-dom';

Upvotes: 3

Related Questions