React history.push 正在更新 url 但无法加载所需的组件

Question

I have 2 components namely 'Navbar' and ' PostInputDailogueBox ' which present inside the App.js component. whenever I click a button in the navbar I need to navigate from the ' Navbar ' component to the ' PostInputDailogueBox ' component. To do this used history.push() but I am not able to navigate to the desired component.

below are specified related component:

App.js

import React,{Component} from 'react';
import './App.css';
import Navbar from './Components/Navbar/Navbar';
import Posts from './Components/Posts/Posts';
import PostInputDailogueBox from './Components/PostInputDailogueBox/PostInputDailogueBox';
import {Route} from 'react-router-dom';

class App extends Component {
  constructor(props){
    super(props);

    this.state = {
      user: {
        username:'',
        no_of_posts:0
      },
      postDetails: []
    };
  }

  componentDidMount(){
    fetch('http://localhost:3001')
    .then((res)=>res.json())
    .then((data)=>{
      this.setState({postDetails:data},()=>{
        console.log("initialized postDetails");
      });
    });
    const { username, no_of_post} = this.props.location.data;
    this.setState({user: {
      username:username,
      no_of_posts:no_of_post
    }},()=>{
      console.log(this.state.user);
    })
  }

  loadPost = (post) =>{
    this.setState({ 
      postDetails: [post, ...this.state.postDetails] 
    },()=>{
      console.log("loaded post details",post);
    });
  }

  render(){
    const {postDetails, user} = this.state;
    return (
      <div className="App">
        <Navbar/>
        <Posts postDetails = {postDetails}/>
        <Route exact path="/upload" 
              render={(props) => <PostInputDailogueBox {...props} 
                                  username = {user.username}
                                  loadPost = {this.loadPost} />}/>
      </div>
    );
  }
}

export default App;

Navbar.js

In this file I trying to push the state in history so that the postInputDailogueBox can use it.

import React,{useState} from 'react';
import './Navbar.css';
import 'fontawesome-free-5.12.0-web/css/all.min.css';
import { useHistory } from "react-router-dom";

const Navbar = (props) =>{
    const [click,setClick] = useState(false);
    let history = useHistory();

    const handleOnClick = () =>{
        setClick(true);
        history.push({
            pathname:'/upload',
            state : {click: click}
        })
    }
    return(
        <div className = "nav-container">
            <div className='nav-img'>
                <img alt='insta-name' src={require('../images/logo_name.png')}/>
            </div>
            <button className="new_post_btn" onClick = {handleOnClick}><i className="fa fa-plus-square font_css" aria-hidden="true"></i></button>
        </div>
    )
}
export default Navbar;

I have tried by writing props.history.push() in place of history.push() but I got an error as

TypeError: Cannot read property 'push' of undefined

PostInputDailogueBox In this file, I am trying to get the state data and loading in the current component state, and whenever it changes I have to manipulate DOM and finally have to send data to App.js using loadUser()

import React,{useState,useEffect} from 'react';
import './PostInputDailogueBox.css';

const PostInputDailogueBox = (props) =>{
  const [caption,setCaption] = useState('');
  const [file,setFile] = useState('');
  const {click} = this.props.location.state;
  const [stateClick, setClick] = useState(click);
  const {username, loadPost} = this.props;

  useEffect(()=>{
    const container = document.querySelector('.overlay');
    console.log("click",stateClick);
    console.log("container",container);
    if(stateClick === true)
      container.classList.add('open-overlay');
    else
      container.classList.remove('open-overlay');

  },[stateClick]);

  const onSubmitUpload = (e) =>{
    console.log("on onSubmitUpload");
    e.preventDefault();
    setClick(false);
    fetch('http://localhost:3001/addPost',{
        method:'post',
        headers:{'Content-Type':'application/json'},
        body: JSON.stringify({
            username: username,
            caption: caption,
            imageUrl: file
          })
        })
        .then(res => res.json())
        .then(post => {
          if(post){
            console.log("successs");
            loadPost(post);
          }
      })
  }

  return(
    <div className="overlay">
      <div className="overlay-container">
          <form onSubmit = {onSubmitUpload}>
            <input className="inputblk" 
                   type="text" 
                   placeholder="type caption..." 
                   onChange={e => setCaption(e.target.value)}/><br/>
            <input className="inputblk" 
                   type="text" 
                   placeholder="provide File..." 
                   onChange={e => setFile(e.target.value)}/><br/>
            <input className="input-btn" 
                   value = 'Upload'
                   type = "submit"/>
          </form>
      </div>
    </div>
  )
}

export default PostInputDailogueBox;

routes.js :

import React from 'react';
import App from './App';
import Signin from './Components/Signin/Signin';
import Signup from './Components/Signup/Signup';
import { Route, Switch, Redirect } from 'react-router-dom';

const Routes = () =>{
    return (
        <div>
        <Switch>
            <Route exact path="/signin" component={Signin} />
            <Route exact path="/">
              <Redirect to="/signin" />
            </Route>
            <Route exact path="/signup" component={Signup} />
            <Route exact path="/home" component = {App} />
        </Switch>
        </div>
    )
}

export default Routes;

plz, help in resolving this problem. Thanks in advance.

Answer 1

You need to setup the routes correctly:

import { BrowserRouter, Switch, Route } from 'react-router-dom'

// ...

<BrowserRouter>
  <Navbar />
  <Posts postDetails={postDetails} />
  <Switch>
    <Route
      exact
      path="/upload"
      render={props => (
        <PostInputDailogueBox
          {...props}
          username={user.username}
          loadPost={this.loadPost}
        />
      )}
    />
  </Switch>
</BrowserRouter>

Also, check https://reactrouter.com/web/example/basic