reactJS how to pass state when going to another URL? (clicking “New” on navbar that goes to Submit form)

Question

I have added a navigation to my react app whereby I can click on the link, New, to be taken to a new page to submit my form.

However, how do I pass my state to this page? First and formost, this is my 3rd day of using the react, so I am most probably doing this wrong:

In the main.js, I have declared my routes:

var routes = (
    <Router history={createHistory()}>
        <Route path="/" component={App}/>
        <Route path="/submit" component={NewLink}/>
        <Route path="*" component={NotExist}/>
    </Router>
)

In my App component, I have only two main components (and these have more components in them that are used):

render : function() {
        return (
            <div>
                <TopNav />

                <ShowLinks allLinks={this.state.links} />
            </div>
        )
    }

So, the main page shows all the links (similar to the webpage reddit), and from the navbar it takes to the newLinkForm whereby user can make a new link to submit. However, how can I send my state here? Through TopNav component?

NEW UPDATED CODE:

main.js

import React from 'react';
import ReactDOM from 'react-dom';


/*
    Router components
*/
import {Router,Route} from 'react-router';
import {createHistory} from 'history';

import NotFound from './components/NotFound';
import App from './components/App';
import CreatePost from './components/CreatePost';

var routes = (
    <Router history={createHistory()}>
        <Route path="/" component={App}>
            <Route path="/submit" component={CreatePost}/>
        </Route>

        <Route path="*" component={NotFound}/>
    </Router>
)

ReactDOM.render(routes, document.querySelector('#main'));

App.js

import React from 'react';

import NavigationBar from './NavigationBar';
import CreatePost from './CreatePost';
import DisplayPosts from './DisplayPosts';
import NewPostForm from './NewPostForm';

var App = React.createClass({
    getInitialState : function() {
        return {
            posts : {}
        }       
    },
    componentDidMount : function() {        

        var my_localStorage = localStorage.getItem('post-');

        if(my_localStorage) {
            // update component state to reflect what is in local storage
            this.setState({posts : JSON.parse(my_localStorage)});
        }
    },
    componentWillUpdate : function(nextProps, nextState) {
        localStorage.setItem('post-' , JSON.stringify(nextState.posts));
    },
    addPostToPosts : function(post) {
        //console.log(post);
        var timestamp = (new Date().getTime()); //research how to use uuid instead 
        this.state.posts[timestamp] = post;
        this.setState({ posts : this.state.posts });
        //console.log("key is " + Object.keys(this.state.posts));
    },
    render : function() {
        //<CreatePost addPostToPosts={this.addPostToPosts} posts={this.state.posts}/>
        return (
            <div>
                <NavigationBar/>
                    {this.props.children}
                <DisplayPosts postData={this.state.posts} />
            </div>
        )
    }
});

export default App;

NavigationBar.js

import React from 'react';
import {Navbar,Nav,NavItem,NavDropdown,MenuItem} from 'react-bootstrap';

var NavigationBar = new React.createClass({

    render : function() {
        return(
            <Navbar className="my-navbar">
            <Navbar.Header>
              <Navbar.Brand>
                <a href="/">Main React</a>
              </Navbar.Brand>
              <Navbar.Toggle />
            </Navbar.Header>
            <Navbar.Collapse>
                <Nav>
                  <NavItem eventKey={1} href="/submit">New Post</NavItem>                 
                </Nav>
            </Navbar.Collapse>
          </Navbar>         
        )
    }
});

export default NavigationBar

NewPostForm.js

import React from 'react';
import {History} from 'react-router';

var NewPostForm = React.createClass({
    goBack : function(e) {
        e.preventDefault();
        console.log(this.history);
        //this.history.goBack();
    },
    mixins : [History],
    createNewPost : function(e) {
        e.preventDefault();
        //alert("pressed submit");
        if((this.refs.title.value).length === 0 || (this.refs.message.value).length === 0 || (this.refs.image).length === 0) {
            alert("Please fill out all fields!");
        }
        else {
            //alert("yay");
            //create new post object and send it to parent this.state.posts
            var post = {
                title : this.refs.title.value,
                message : this.refs.message.value,
                image : this.refs.image.value
            }
            //console.log(post);
            this.props.addPostToPosts(post);
            this.refs.newPostForm.reset();
        }
    },  
    render : function() {
        //make this to react bootstrp
        return (
            <form className="new-post-form" ref="newPostForm" onSubmit={this.createNewPost}>
                <div className="form-group">
                    <label>Title</label>
                    <input className="form-control" type="text" ref="title" placeholder="Title" />
                </div>
                <div className="form-group">
                    <label>Message</label>
                    <textarea className="form-control" type="text" ref="message" placeholder="Share your message" />
                </div>
                <div className="form-group">
                    <label>Image</label>
                    <input className="form-control" type="text" ref="image" placeholder="Share an image URL" />
                </div>
                <button type="submit" className="npf-btn btn btn-primary">Submit</button>               
                <button type="button" className="npf-btn btn btn-default" onClick={this.goBack}>Cancel</button>         
            </form>
        )
    }
});

export default NewPostForm;

CreatePost.js

import React from 'react';
import NewPostForm from './NewPostForm';

var CreatePost = React.createClass({

    render : function() {
        return (
            <NewPostForm addPostToPosts={this.props.addPostToPosts}/>
        )
    }
});

export default CreatePost;

Answer 1

Not sure this will answer your question, but I think your more so asking about how to deal with navigation rather then any form of state.

Since your trying to create a new link, there doesn't seem to be a reason for you to pass state. I think what your really trying to ask is:

How do I get my TopNav and my ShowLinks components to also appear on my new /submit page.

The answer to that question is simple. You can nest routes.

To me it seems like what your trying to do is:

var routes = (
    <Router history={createHistory()}>
        <Route path="/" component={App}>
            <Route path="/submit" component={NewLink}/>
        </Route>

        <Route path="*" component={NotExist}/>
    </Router>
)

By wrapping NewLink with your App component you can use the navigation layout you already have setup, and just pass down the props.

render : function() {
        return (
            <div>
                <TopNav />
                {this.props.children}
                <ShowLinks allLinks={this.state.links} />
            </div>
        )
    }

The line I added {this.props.children} , you can think of that as where your subcomponents will now render. So when you visit /submit you will be using both the App component and from inside their the NewLink component.

Hope this was what you were looking for :)