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

React Router v6 Error: Failed prop type: The prop `location` is marked as required in `Router`, but its value is `undefined`

I have a very basic setup, trying out react router v6. But I always get the errormessage mentioned in the headline, when I click on the "go home" button. How can I fix this?
App.js
render({AppRoutes})
AppRoutes.js
import { BrowserRouter, Routes, Route, HashRouter } from 'react-router-dom';
import React from 'react';
import DefaultComponent from './scenes/Default/Default2';
import TestComponent from './scenes/Default/TestComponent';
const AppRoutes = (
<HashRouter>
<Routes>
<Route path="/" element = {<DefaultComponent/>}>
<Route path="test" element={<TestComponent/>}/>
</Route>
</Routes>
</HashRouter>
);
export default AppRoutes;
DefaultComponent.js
import React from 'react';
import { useNavigate } from 'react-router-dom';
function DefaultComponent() {
let navigate = useNavigate();
function handleClick() {
navigate('/test');
}
return (
<div>
<button onClick={handleClick}>go home</button>
</div>
);
}
export default DefaultComponent;
TestComponent.js
import React from 'react';
function TestComponent (){
return (
<h1>This is a test!</h1>
);
}
export default TestComponent;

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

this.props.children isnt working with react-router

i am trying to make a navigaton on my website by react-router and typescript. but its not working and instead of Home page i get an empty page
Thats my app.tsx file
// app.tsx
import * as React from 'react';
import '../App.css';
class App extends React.Component<any,any> {
public render() {
return (
<div>
{this.props.children}
</div>
);
}
}
export default App;
index.tsx
// index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
import {AppRouter} from './router';
ReactDOM.render(
<AppRouter/>,
document.getElementById('root') as HTMLElement
);
registerServiceWorker();
router.tsx
import * as React from 'react';
import { Route,Router } from 'react-router';
import App from './components/App';
import HomePage from './components/home/HomePage';
import createHistory from 'history/createBrowserHistory';
const history = createHistory();
export const AppRouter = () => {
return (
<Router history={history}>
<Route path="/" component={App} >
<Route path="/" exact={true} component={HomePage} />
</Route>
</Router>
);
}
i dont really dont know what to say. i cant find any possible info about this. If u know better way to make navigation with typescript, react and redux i am open for ideas. thx

In the App component, you are doing {this.props.children}. So you should not pass that component to any route.
You need to add all the routes as a child of that component through which you will get the children in your props.
Also, for switching between routes, you should bind all the routes in the 'Switch' imported from react-router.
So, your router.tsx file should look like:
import * as React from 'react';
import { Route, Router, Switch } from 'react-router';
import App from './components/App';
import OtherComponent from './components/OtherComponent';
import HomePage from './components/home/HomePage';
import createHistory from 'history/createBrowserHistory';
const history = createHistory();
export const AppRouter = () => {
return (
<App>
<Router history={history}>
<Switch>
<Route exact={true} component={HomePage} />
<Route path="/other" component={OtherComponent} />
</Switch>
</Router>
</App>
);
}
By this, you will get the 'HomePage' component at route '/' and OtherComponent at route '/other'.