Why I can not see the result of router while component is present React

Question

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

Answer 1

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 Component s 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