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.
Related
I am fairly new to using react and been following a couple of tutorials on YT, I have ran into a problem with one of them. I copied everything line by line, but my text on 'Home' and 'Login' doesnt display! I get no errors, but the page remains blank.
here is App.js
import React from 'react'
import { Routes, Route, useNavigate } from 'react-router-dom';
import Login from './components/Login';
import Home from './container/Home';
const App = () => {
return (
<Routes>
<Route path="login" element={<Login />} />
<Route path="/*" element={<Home />} />
</Routes>
);
};
export default App;
Also the index.js file:
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';
import './index.css';
ReactDOM.render(
<Router>
<App />
</Router>,
document.getElementById('root'),
);
**Then Login.jsx
**
import React from 'react';
const Login = () => {
return (
<div>
Login
</div>
);
};
export default Login;
Finally Home.jsx
import React from 'react';``your text``
const Home = () => {
return (
<div>
Home
</div>
);
};
export default Home;
I know I am missing something, but I cant seem to find it! Any and all help is very much appreciated!
Tried to see if I am using on old version of the BroswerROuter/Routes in React, but I have very little knowledge to see the difference just yet!
I am trying to use a navlink in my app.jsx file to create links in my navbar but when I try to npm start, I dont see the nav links and I get a message that says No routes matched location "/". I'm not sure why. I saw somewhere that I needed to start using element but I'm not sure how. I'll show app.jsx file with the element statements that didn't seem to work still and the file without using element at all which also didn't help but is what I'm used to. Can someone point me in the right direction?
index.js :
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './pages/App/App';
import { BrowserRouter, Routes, Route } from 'react-router-dom'
ReactDOM.render(
<BrowserRouter>
<Routes>
<React.Fragment>
<Route render={() => <App/>} />
</React.Fragment>
</Routes>
</BrowserRouter>,
document.getElementById('root')
);
App.jsx : with element
import React, { useState } from 'react';
import { Route, NavLink } from 'react-router-dom'
import './App.css';
function App() {
const [puppies, setPuppies] = useState([])
return (
<div className="App">
<header className="App-header">
React Puppies CRUD
<nav>
<NavLink exact to='/' element={<div>Index</div>}>Puppy List</NavLink>
<NavLink className='m-left' exact to='/add' element={<div>Add</div>}>Add Puppy</NavLink>
</nav>
</header>
<main>
</main>
</div>
);
}
export default App;
App.jsx : without element
import React, { useState } from 'react';
import { Route, NavLink } from 'react-router-dom'
import './App.css';
function App() {
const [puppies, setPuppies] = useState([])
return (
<div className="App">
<header className="App-header">
React Puppies CRUD
<nav>
<NavLink exact to='/'>Puppy List</NavLink>
<NavLink className='m-left' exact to='/add'>Add Puppy</NavLink>
</nav>
</header>
<main>
</main>
</div>
);
}
export default App;
Links use a to prop for the target route they are linking to, and the UI needs to be rendered on Route components on the element prop. I suggest unconditionally rendering the App component and move the routes into it.
Example:
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './pages/App/App';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<App/>
</BrowserRouter>,
document.getElementById('root')
);
App
import React, { useState } from 'react';
import { Routes, Route, NavLink } from 'react-router-dom'
import './App.css';
function App() {
const [puppies, setPuppies] = useState([]);
return (
<div className="App">
<header className="App-header">
React Puppies CRUD
<nav>
<NavLink end to='/'>Puppy List</NavLink>
<NavLink className='m-left' to='/add'>Add Puppy</NavLink>
</nav>
</header>
<main>
<Routes>
<Route path="/" element={<div>Puppy List</div>} />
<Route path="/add" element={<div>Add Puppy</div>} />
</Routes>
</main>
</div>
);
}
export default App;
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={} />
Currently, I trying to understand how react.js is working with help with react-router-dom. I have to face issues that I wanted to use the same layout for the personal detail form. but I want it to display different data for two different people. let say I click on "phua" and then it will use the layout and get the data from Data.js and provide the information, if I click on "foong" then the system will use the same layout but uses the data from foong in data.js
import React from 'react';
import "./App.css"
import Navbar from './components/Navbar';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import Home from './components/pages/HomePage/Home'
import Footer from './components/pages/Footer/Footer';
import Service from './components/Service';
import Info from './components/pages/Info/Info';
function App(){
return(
<Router>
<Navbar />
<Switch>
<Route path='/' exact component={Home}/>
<Route path='/service' exact component={Service}/>
<Route path='/Information' component={Info/phua}/>
<Route path='/Information' component={Info/foong}/>
</Switch>
<Footer />
</Router>
);
}
export default App;
Information.js
import React from 'react'
import "./Information.css"
function Information({img, alt, name, age, gender}) {
return (
<>
<div className="container">
<div className="row_details">
<div className="col-personal-logo">
<img src={img} alt={alt} className="personal-image"/>
<h2>Name:{name}</h2>
<p>Age:{age}</p>
<p>Gender:{gender}</p>
<p></p>
</div>
<div className="col-personal">
</div>
</div>
</div>
</>
)
}
export default Information
Data.js
export const phua= {
img:'images/dribbble-avatar.webp',
alt:'Phua',
name:'Phua Yeong Tsann',
age:'42',
gender:'Male',
}
export const foong= {
img:'avatar_dribbble.webp',
alt:'Foong',
name:'Foong',
age:'32',
gender:'Female',
}
Info.js
import React from 'react'
import Information from '../../Information'
import {phua} from './Data'
function Info() {
return (
<>
<Information {...phua} />
</>
)
}
export default Info
I am new to react and still learning.
I am trying to add nested routes in my react project, so that a content of div changes based on the route.
Following are my components :-
//index.js
import 'bootstrap/dist/css/bootstrap.min.css';
import 'font-awesome/css/font-awesome.min.css';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
library.add(faIgloo);
ReactDOM.render(<BrowserRouter>
<App />
</BrowserRouter>, document.getElementById('root'));
serviceWorker.unregister();
// app.js
import React, { Component } from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';
import Login from './components/login/login.js'
import Protected from './components/protected/protected.js'
import './App.css';
class App extends Component {
render() {
return (
<Switch>
<Route exact path="/protected" component={Protected}/>
<Route path="/login" component={Login}/>
</Switch>
);
}
}
export default App;
//protected.js
import React, { Component } from 'react';
import { Route, Switch } from 'react-router-dom';
import Header from './header/header.js';
import './protected.css';
import CafePreview from './cafepreview/cafepreview.js'
class Protected extends Component {
render() {
const {match} = this.props;
return (
<div>
<Header></Header>
{/*<Preview/>*/}
<Switch>
<Route path='/protected/cafepreview' component={CafePreview}/>
</Switch>
</div>
);
}
}
export default Protected
// cafepreview.js
import React, { Component } from 'react';
import { Route, Switch } from 'react-router-dom';
import './preview.css';
console.log("here");
class CafePreview extends Component {
render() {
return (
<div>
<div>
<i class="fa fas fa-arrow-left"></i>
<span> BACK TO ALL CAFES </span>
</div>
</div>
);
}
}
export default CafePreview
When i open '/protected' i can see the header coming, but when i try to open '/protected/cafepreview' i see an empty page instead of header with cafe preview html.
I tried some options mentioned in this stackoverflow thread Multiple Nested Routes in react-router-dom v4 but none of them worked.
I hope i have explained my problem clearly.
Check documentation https://reacttraining.com/react-router/web/api/Route/exact-bool. Remove exact from the route in the App component and it will start working.
its because you have set exact in the app.js file. Remove it from the particular route. It'll work