We Keep Coding

Reactjs Routing not navigating

I currently have a react app I am working on and the routing is buggy. I have set up react applications and their routings like this before but when trying to route to the "details" component, only the url changes, but the component does not load. An extra pair of eyes would be nice to see what I'm missing. I have the routes set up as:
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Router } from "react-router-dom";
import { createBrowserHistory } from "history";
const history = createBrowserHistory();
const render = () => {
ReactDOM.render(
<Router history={history}>
<App />
</Router>,
document.getElementById('root'),
);
};
render();
App.js:
import React from 'react';
import {Route, Switch} from 'react-router-dom';
import { BreweryPage } from './route.js';
function App() {
return (
<>
<Switch>
<Route exact path="/" component={BreweryPage}/>
</Switch>
</>
);
}
export default App;
route.js
import React from 'react';
import PropTypes from 'prop-types';
import { Route, Switch, withRouter } from 'react-router-dom';
import { BreweryPage, BreweryDetailPage } from './pages';
import {AppContainer} from "../../common/header";
const BreweryHomePage = ({ match }) => (
<AppContainer>
<Switch>
<Route exact path={`${match.url}`} component={BreweryPage} />
<Route exact path={`${match.url}/details/:breweryid`} component={BreweryDetailPage} />
</Switch>
</AppContainer>
);
BreweryHomePage.propTypes = {
match: PropTypes.shape({
url: PropTypes.string,
}),
};
BreweryHomePage.defaultProps = {
match: {
url: '',
},
};
export default withRouter(BreweryHomePage);
The root "/" path component loads, but I can't get the details components component to render when routing with history.push(path) using const history = useHistory();.

do it like this
1-index.js should like this:
import React from "react"
import ReactDOM from "react-dom"
import App from "./App"
import { BrowserRouter } from "react-router-dom"
const app = (
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
<React.StrictMode/>
)
ReactDOM.render(app, document.getElementById("root"))
you have to add BrowserRouter to be able to use navigation
2- you can use BreweryPage in App.js like this:
import React from 'react';
import {Route, Switch} from 'react-router-dom';
import { BreweryPage } from './route.js';
function App() {
return (
<>
<BreweryPage/>
</>
);
}
export default App;
3- route.js
import React from 'react';
import PropTypes from 'prop-types';
import { Route, Switch, withRouter } from 'react-router-dom';
import { BreweryPage, BreweryDetailPage } from './pages';
import { createBrowserHistory } from "history";
import {AppContainer} from "../../common/header";
const newHistory = createBrowserHistory();
const BreweryHomePage = (props) => (
<Router history={newHistory}>
<Switch>
<Route exact path="/" component={BreweryPage} />
<Route path="/details/:breweryid" component={BreweryDetailPage} />
</Switch>
</Router>
);
export default withRouter(BreweryHomePage);

How to render a react component on landing?

I am new to react app trying to add a component and loading when app opens but it is showing in console Matched leaf route at location "/" does not have an element. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page what is implemented wrong please help
App.js
import React from 'react';
import './app.css';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import JOB_DESC from './job_desc';
function App() {
return (
<Router>
<Routes>
<Route exact path='/' component={JOB_DESC} />
</Routes>
</Router>
)
}
export default App;
job_desc.js
import React, { Component } from 'react';
import './app.css';
import ReactImage from './react.png';
export default class JOB_DESC extends Component {
state = { data: null };
componentDidMount() {
fetch('/api/getUsername')
.then(res => res.json())
.then(res => this.setState({ data : res.data}));
}
render() {
const { data } = this.state;
console.log("DATA", data);
return (
<div>
<h1>Test</h1>
{username ? <h1>{`Hello ${username}`}</h1> : <h1>Loading.. please wait!</h1>}
<img src={ReactImage} alt="react" />
</div>
);
}
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));

Try adding <JOB_DESC /> as component in the Route

Page contains from many component turn blank when reload page?

I'm a newbie in React js and currently i'm building a layout that contains from many components
For example, a home page layout that contains sidebar component, topbar component, footer component and main content component.
When i click on a link in sidebar component, the main content will be changed based on url of link i clicked on and other components will be same on all pages regardless of url.
Here is my code:
MainLayout.js
import React, { Component } from 'react';
import { Route } from 'react-router-dom';
import Sidebar from '../components/Sidebar';
const MainLayout = ({children, ...rest}) => {
return (
<div className="page page-dashboard">
{/* <div className="sidebar"><Sidebar></Sidebar></div> */}
<div className="main">
{children}
</div>
</div>
)
}
const MainLayoutRoute = ({component: Component, ...rest}) => {
return (
<Route {...rest} render={matchProps => (
<MainLayout>
<Component {...matchProps} />
</MainLayout>
)} />
)
};
export default MainLayoutRoute;
MainPage.js
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom';
import Sidebar from './Sidebar';
import Header from './Header';
import Footer from './Footer';
import UsersList from './UsersList';
export default class MainPage extends Component {
render() {
return (
<Router>
<div>
<Header/>
<Sidebar/>
<div className="wrapper">
<Switch>
<Route path={"/users"} component={UsersList} />
</Switch>
</div>
<Footer></Footer>
</div>
</Router>
);
}
}
Sidebar.js
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Redirect, Switch, Link } from 'react-router-dom';
export default class Sidebar extends Component {
render() {
return (
<div className="sidenav">
<ul>
<li><Link to="/users">Users</Link></li>
<li><Link to="/settings">Setting</Link></li>
</ul>
</div>
);
}
}
UserList.js
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Redirect, Switch, Link } from 'react-router-dom';
export default class UsersList extends Component {
render() {
return (
<div>
<button><Link to="/newuser">Add new user</Link></button>
</div>
);
}
}
App.js
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom';
import logo from './logo.svg';
import './App.css';
import './css/custom.scss';
/** Layouts **/
import LoginLayoutRoute from "./layouts/LoginLayout";
import MainLayoutRoute from "./layouts/MainLayout";
/** Components **/
import MainPage from './components/MainPage';
import LoginPage from './components/LoginPage'
export default class App extends Component {
render() {
return (
<Router>
<Switch>
<Route exact path="/">
<Redirect to="/login" />
</Route>
<LoginLayoutRoute path="/login" component={LoginPage} />
<MainLayoutRoute path="/home" component={MainPage} />
</Switch>
</Router>
);
}
}
But when i refresh the page, it turned blank like this:
Before i refresh page
After i refresh page
How can i fix this ?

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

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

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 Components 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

Meteor - Simple react router throwing errors

I have basically copied code straight from the documentation, and it is throwing a peculiar error.
Warning: Failed prop type: The prop `history` is marked as required in
`Router`, but its value is `undefined`.
in Router
Here is my code:
client/main.jsx
import React from "react"
import { render } from "react-dom"
import { Meteor } from "meteor/meteor"
import { renderRoutes } from "../imports/ui/Routes.jsx"
Meteor.startup(() => {
render(renderRoutes(), document.getElementById('react-root'))
})
imports/ui/Routes.jsx
import React from 'react'
import { render } from "react-dom"
import { Router, Route, IndexRoute, browserHistory } from 'react-router'
// route components
import App from "./App.jsx"
export const renderRoutes = () => (
<Router history={browserHistory}>
<Route path="/" component={App} />
</Router>
)
imports/ui/App.jsx
import React, { Component } from 'react'
import TopBar from "./components/TopBar.jsx"
import LeftMenuContainer from "./components/LeftMenuContainer.jsx"
import LivePurchases from "./components/LivePurchases.jsx"
// App component - represents the whole app
export default class App extends Component {
render() {
return (
<div className="App">
<div className="flexWrapperGlobal">
<TopBar/>
<div className="contentContainer">
<LeftMenuContainer/>
<div className="bodyContainer">
<LivePurchases/>
<div className="siteContentContainer">
{this.props.children || "test"}
</div>
</div>
</div>
</div>
</div>
)
}
}
It appears that it should not be giving this error, as I am setting the prop at history={browserHistory}

Switch over to the example from the React Docs,
imports/ui/Routes.jsx
import React from 'react'
import { render } from "react-dom"
import { Router, Route, IndexRoute } from 'react-router'
import createBrowserHistory from 'history/createBrowserHistory'
// route components
import App from "./App.jsx"
const history = createBrowserHistory()
export const renderRoutes = () => (
<Router history={history}>
<Route path="/" component={App} />
</Router>
)