Develop Reference

why is my router not working in react - React.js

Can anyone tell me why my router is not working, I didn’t do anything to complicated with my app its one one page and I tried to add a router in app.js that has a link to my home page and every time i add router everything disappears from my app its just a white screen.
app.js
import "aos/dist/aos.css";
import { BrowserRouter as Router, Route, Routes} from "react-router-dom";
import Home from "./components/Home";
function App() {
return (
<div className="App">
<h1>Welcome to React Router!</h1>
<Routes>
<Route path="/" element={<Home />} />
</Routes>
</div>
);
}
export default App;
Home.js
import React from 'react'
function Home() {
return (
<div>Home</div>
)
}
export default Home
index.js
import * as React from "react";
import * as ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import "./index.css";
import App from "./App";
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("root")
);

Try using Switch instead of Routes and you also don't have to use triangular brackets in element
import Home from './components/Home';
import { Route, Switch } from 'react-router';
<Switch>
<Route path="/" element={Home} />
</Switch>

If you want all path begin with / go to your home page, you can change like this: <Route path="/*" element={} />

React JS routing nothing is displaying

Im new at routing on react.JS, however I have been struggling because the simple products.jsx
should return a simple message when I click, but no one is displaying.
Index.JS code
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>
, document.getElementById('root'));
registerServiceWorker();
code at App.JS
import React, { Component } from "react";
import NavBar from "./components/navbar";
import { Route, Routes } from 'react-router-dom';
import Products from "./components/products";
import "./App.css";
class App extends Component {
render() {
return (
<div>
<NavBar />
<Routes>
<Route path= "/products" component={Products}></Route>
</Routes>
</div>
);
}
}
export default App;
nav.jsx
import React from "react";
const NavBar = () => {
return (
<ul>
<li>
Home
</li>
<li>
Products
</li>
<li>
Posts
</li>
<li>
Admin
</li>
</ul>
);
};
export default NavBar;
products.jsx code
const Product = () => {
return <h1>Products</h1>;
};
export default Product;
I dont know basically what i'm missing.

In react-router-dom v6 the Route components render their components on the element prop as JSX.
<Route path="/products" element={<Products />} />
If you are still using v5 and have just mixed up documentation, then in v5 use the Switch instead (Routes replaced Switch in v6) and use the component prop as you were.
<Switch>
<Route path="/products" component={Products} />
</Switch>

If you are using react-router-dom 6, you have to use element instead of component inside of each route like this:
<Routes>
<Route path= "/products" element={<Products/>}></Route>
</Routes>
if you are using react-router-dom 5, you have to use Switch instead of Routes, like this:
<Switch>
<Route path= "/products" component={Products}></Route>
</Switch>

How react-router works on generating the routes from an array?

So basically how react-router works on generating the routes from an array? I have been building this recipe app but generating routes is what got me stuck. From some reason the routes dont get created so when I click on the recipe Link, it redirects me to blank page without displaying the content.
Full github code
App.js
import RecipeList from './RecipeList';
import './App.css';
import RecipeProvider from './RecipeContext'
import Form from './Form';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'
import {RecipeContext} from './RecipeContext';
import {useContext} from 'react';
import Details from './Details';
function App() {
const [recipes,setRecipes]=useContext(RecipeContext)
return (
<RecipeProvider>
<Router>
<Switch>
<>
<Route exact path="/">
<RecipeList/>
</Route>
<Route exact path="/pridat-recept">
<Form/>
</Route>
{recipes.map(item=>(
<Route exact path={`/${item.name}`} >
<Details key={item.name}/>
</Route>
)
)}
</>
</Switch>
</Router>
</RecipeProvider>
);
}
export default App;
Recipe.js
import React from 'react'
import Image from "./vitaminDfood-1132105308-770x553.jpg"
import './Recipe.css'
import {Link} from 'react-router-dom'
import Details from './Details';
function Recipe(props) {
return (
<div className="recipe">
<div className="first-column">
<img src={Image} alt="cam"/>
</div>
<div className="second-column">
<Link to={`/${props.name}`}><p className="name">{props.name}</p></Link>
<p> {props.score.toFixed(2)}</p>
<p className="time"><i className="far fa-clock"></i>{props.duration}<span>min.</span></p>
</div>
</div>
)
}
export default Recipe
Details.js
import {RecipeContext} from './RecipeContext';
import {useContext} from 'react';
import './Details.css'
import React,{useEffect,useState} from 'react';
import axios from 'axios';
function Details() {
return (
<h1>hry</h1>
)
}
export default Details;

Well you could use the map() method to render every item or object in the array. After when you render you can put which will generate you to the link from the array id.
That is the option you can put react-router from an array by using the id's.

React Router V4 Path Issues

I'm using React Router Dom V4, my path to my homepage works but my path to my about page doesn't work.
I'm not sure if it's anything to do with the fact I'm using Xampp or not.
Index.js
import React from "react";
import { render } from "react-dom";
import { BrowserRouter as Router, Route } from "react-router-dom";
import App from "./components/App";
import About from "./components/About";
const Root = () => {
return (
<Router>
<div>
<Route path="/" component={App} />
<Route path="/about" component={About} />
</div>
</Router>
)
}
render(<Root />, document.getElementById('main'));
Header.js
import React from "react";
const Header = () => {
return (
<div>
<ul>
<li>About</li>
</ul>
</div>
)
}
export default Header;
About.js
import React from "react";
const About = () => {
return (
<p>This is the about page</p>
)
}
export default About;

The problem is that you use plain html links, so React will not be called when the user clicks the link. You should use the Link Element from the router-module.
Try the following for the menu:
import { Link } from "react-router-dom"
....
<li><Link to='/about'>About</Link></li>

Routing is not working in Reactjs + ES6

When I am clicking on the link "cake" I am getting the error the path is not matched or server is not able to find.
Here is my code for 3 files - Router, Navigation and detail components
Routers.js- component handling the routing
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route , HashHistory , IndexRoute , useRouterHistory} from 'react-router';
import History from 'history';
import {CreateHashHistory} from 'history';
import createBrowserHistory from 'history/lib/createBrowserHistory';
import { browserHistory } from 'react-router';
import Base from './Base.jsx';
import ListDetail from './ListDetail.jsx';
let Routes =
<Router history={browserHistory}>
<Route path="/" component={Base} >
<Route path="/cake" component= {ListDetail}></Route>
</Route>
</Router>
export default Routes;
Navigation components - handling the navigaton links
import React from 'react';
import ReactDOM from 'react-dom';
import { Link } from 'react-router';
class ContentList extends React.Component {
render(){
return(
<div id="innercontent">
<h2>What you love?</h2>
<ul >
<Link to={'/cake'}>Cakes</Link>
<Link to={'/icecream'}>icecream</Link>
<Link to={'/browin'}>browin</Link>
</ul>
</div>
)
}
}
export default ContentList;
Detail Component - Detail page to display
import React from 'react';
import ReactDOM from 'react-dom';
class ListDetail extends React.Component {
render(){
return(
<div>
<h1>hi Details</h1>
</div>
)
}
}
export default ListDetail;
Base.JSX
import React from 'react';
import ReactDOM from 'react-dom';
import Header from './header.jsx';
import Footer from './footer.jsx';
import ContentList from './contentList.jsx';
import FormElement from './form.jsx';
import ListDetail from './ListDetail.jsx';
class Base extends React.Component {
render(){
return(
<div>
<Header name="My Recipe Book"/>
<section id="content">
<FormElement />
<ContentList />
</section>
<Footer />
<ListDetail />
</div>
)
}
}
export default Base;
Main.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import Routes from './router.jsx';
ReactDOM.render(Routes, document.getElementById('app'));
Thanks for the help!!

The render function of your base.jsx file should be something like this :
render(){
return(
<div>
<Header name="My Recipe Book"/>
<section id="content">
<FormElement />
<ContentList />
{this.props.children}
</section>
<Footer />
</div>
)
}
Route should be
<Route path="cake" component= {ListDetail} />
And the link :
<Link to="cake">Cakes</Link>
You need to render the routes somewhere.
...A single component to be rendered when the route matches the URL. It can be rendered by the parent route component with this.props.children. Read this.
const routes = (
<Route path="/" component={App}>
<Route path="groups" component={Groups} />
<Route path="users" component={Users} />
</Route>
)
class App extends React.Component {
render () {
return (
<div>
{/* this will be either <Users> or <Groups> */}
{this.props.children}
</div>
)
}
}

You don't need the / in /cake, it's already under /. Do it like this:
<Route path="cake" component={ListDetail} />

Try the following, not sure if it would help.
1. Use
var ContentList = React.createClass({})
instead of
class ContentList extends React.Component.
2. remove the / before 'cake' in your route path.
try using
var Routes = React.createClass({
render: function() {
return (
<div>
<Router history={browserHistory}>
and your updated code instead of let
hope it helps

Does it work with hashHistory ?
To use browserHistory, you need to set up server side rendering.
Here is the tutorial (especially lesson 11 and 13) which helped me understand and set up react-router using browserHistory and server side rendering:
https://github.com/reactjs/react-router-tutorial/tree/master/lessons/
Hope it helps.