CODEWITHSUNDEEP
javascriptjquerynode.jsreactjsreact-router
Sander Bakker
Sander Bakker

Reputation: 67

Multi Page application React Router v4

I'm very new to React JS and trying to build a multi page application with it. I wrote the following code to achieve it:

routes.js

import React from 'react';
import { Route } from 'react-router-dom';
import App from './App';
import {FirstPage} from './Components/FirstPage';

export default (
    <Route excat path="/" component={App}>
        <Route path="/some/firstpage" component={FirstPage} />
    </Route>
);

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {Router} from 'react-router-dom';
import {HashRouter as history} from 'react-router-dom';
//import 'semantic-ui-css/semantic.min.css';
import './index.css';
import App from './App';
import routes from './routes.js';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(
    <Router routes ={routes} history={history} />,
    <App />, document.getElementById('root'));
registerServiceWorker();

FirstPage.js

import React, { Component } from 'react';


export class FirstPage extends Component {
    render() {
        return (
            <div className="App">
                <header className="App-header">
                    <h1 className="App-title">Welcome to FirstPage</h1>
                </header>
                <p className="App-intro">
                </p>
            </div>
        );
    }
}

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Link } from 'react-router-dom';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
          <main>
              {this.props.children}
          </main>

        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
          <Link to="/some/firstpage">Click me</Link>
      </div>
    );
  }
}

export default App;

The error I get is the following:

Target container is not a DOM element. This points to the following code in index.js

./src/index.js
C:/.../frontend/src/index.js:11

   8 | import routes from './routes.js';
   9 | import registerServiceWorker from './registerServiceWorker';
  10 | 
> 11 | ReactDOM.render(
  12 |     <Router routes ={routes} history={history} />,
  13 |     <App />, document.getElementById('root'));
  14 | registerServiceWorker();

I hope someone can help me out and explain me what I'm doing wrong.

Upvotes: 1

Views: 929

Answers (1)

NSSec
NSSec

Reputation: 4551

Your arguments to ReactDOM.render() are wrong. Wrap the App component in the Router component:

ReactDOM.render(
  <Router routes ={routes} history={history} ><App /></Router>, document.getElementById('root')
);

See https://reactjs.org/docs/react-dom.html#render

Upvotes: 1

Related Questions