When running "yarn start" and trying to deploy the app, nothing as simple as "Home" will render on the screen. I have tried changing react versions, toast versions, react router versions etc, and nothing has worked. Please let me know if you notice anything. Also there are currently no console errors

import React, {Component} from "react";
import  {
  Route, 
  BrowserRouter as Router,
  Routes
} from "react-router-dom";
import Home from "./Components/Home/home";
import Profile from "./Components/Profile/profile";
import Sidepanel from "./Components/SidePanel/sidepanel";
import Signin from "./Components/Signin/signin";
import Signup from "./Components/Signup/signup";
import {toast, ToastContainer} from 'react-toastify';

class App extends Component {
  showToast = (type, message)=> {
    switch(type) {
      case 0:
        toast.warning(message)
        break;
      case 1: 
        toast.success(message)
        default: 
          break;
    }
  } 
  render() {
    return(
      <Router>
        <ToastContainer
        autoClose="2000"
        hideProgressBar= {true}
        position= {toast.POSITION.TOP_CENTER}
        />
        <Routes>
          <Route 
          exact
          path="/"
          render= {props => <Home {...props}/>}
          />
          <Route 
          path="/signin"
          render= {props => <Signin showToast={this.showToast}{...props}/>}
          />
          <Route 
          path="/signup"
          render= {props => <Signup showToast={this.showToast}{...props}/>}
          />
          <Route 
          path="/profile"
          render= {props => <Profile showToast={this.showToast}{...props}/>}
          />
          <Route 
          path="/chat"
          render= {props => <Sidepanel showToast={this.showToast}{...props}/>}
          />

        </Routes>
      </Router>
    )
  }
}

export default App;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

import React from "react";

class Home extends React.Component {
    render() {
        return(
            <div>
                <h1>Home</h1>
            </div>
        );
    };
};
export default Home;

CodePudding user response：

You need to next sub-routes as children. This is taken almost verbatim from the React Router examples:

class App extends Component {
  render() {
    return (
      <div>
        <Routes>
          <Route path="/" element={<Layout />}>
            <Route index element={<Home />} />
            <Route path="about" element={<About />} />
            <Route path="dashboard" element={<Dashboard />} />

            <Route path="*" element={<NoMatch />} />
          </Route>
        </Routes>
      </div>
    );
  }
}

function Layout() {
  return (
    <div>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/dashboard">Dashboard</Link>
          </li>
          <li>
            <Link to="/nothing-here">Nothing Here</Link>
          </li>
        </ul>
      </nav>

      <hr />

      {/* An <Outlet> renders whatever child route is currently active,
          so you can think about this <Outlet> as a placeholder for
          the child routes we defined above. */}
      <Outlet />
    </div>
  );
}

As you can see in this example, these is your route to /, and within that route is another route with the index value set. This is what will be used as the index

CodePudding user response：

I think the ToastContainer should be outside Routerm, somethin like this:

<div>
 <ToastContainer
  autoClose="2000"
  hideProgressBar= {true}
  position= {toast.POSITION.TOP_CENTER}
    />
  <Router>
    
    <Routes>
      <Route 
      exact
      path="/"
      render= {props => <Home {...props}/>}
      />
      <Route 
      path="/signin"
      render= {props => <Signin showToast={this.showToast}{...props}/>}
      />
      <Route 
      path="/signup"
      render= {props => <Signup showToast={this.showToast}{...props}/>}
      />
      <Route 
      path="/profile"
      render= {props => <Profile showToast={this.showToast}{...props}/>}
      />
      <Route 
      path="/chat"
      render= {props => <Sidepanel showToast={this.showToast}{...props}/>}
      />

    </Routes>
  </Router>
</div>

or try it whitout ToastContainer.