I was practicing React-Routing, I want to separate constants in another file away from my App.js. Basically, these constants are content for my pages that I want to be editable in a separate environment. But after importing them to App.js, it gives error "'React' must be in scope when using JSX react/react-in-jsx-".
Here is my App.js code:
import React from "react";
import "./App.css";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import {Home,About} from "./Constants.js";
class App extends React.Component {
render() {
return (
<Router>
<div>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<Route exact path="/" component={Home} />
<Route exact path="/about" component={About} />
</div>
</Router>
);
}
}
export default App;
and Constants in Constants.js:
const Home = (
<div>
<h2>Home</h2>
</div>
);
const About = (
<div>
<h2>About</h2>
</div>
);
export { Home, About };
JSX gets compiled into React.createElement calls, so you need to import React if you are using JSX.
You should also write stateless functional components as functions, instead of as a React element directly.
import React from 'react';
const Home = () => (
<div>
<h2>Home</h2>
</div>
);
const About = () => (
<div>
<h2>About</h2>
</div>
);
export { Home, About };
Related
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
Having issues with the react-router picking up on a nested route. A param is passed to accommodate for any subsequent links to be conditionally rendered later in the child component passed into Route
import React from "react";
import { Route } from "react-router-dom";
import CollectionsOverview from "../../components/collections-overview/collections-overview";
import CollectionPage from "../collection/collection";
const ShopPage = ({ match }) => {
return (
<div className="shop-page">
<Route exact path={`${match.path}`} component={CollectionsOverview} />
<Route path={`${match.path}/:collectionId`} component={CollectionPage} />
</div>
);
};
export default ShopPage;
import React from "react";
import "./collection.styles.scss";
const CollectionPage = ({ match }) => {
return (
<div className="collection-page">
<h2>COLLECTION PAGE: {match.params.collectionId}</h2>
</div>
);
};
export default CollectionPage;
Route 2 never renders its component on route manipulation
You can use useParams. Please check this example:
import React from "react";
import {BrowserRouter as Router,Switch,Route,Link,useParams} from "react-router-dom";
export default function ParamsExample() {
return (
<Router>
<div>
<h2>Accounts</h2>
<ul>
<li>
<Link to="/netflix">Netflix</Link>
</li>
<li>
<Link to="/zillow-group">Zillow Group</Link>
</li>
<li>
<Link to="/yahoo">Yahoo</Link>
</li>
<li>
<Link to="/modus-create">Modus Create</Link>
</li>
</ul>
<Switch>
<Route path="/:id" children={<Child />} />
</Switch>
</div>
</Router>
);
}
function Child() {
let { id } = useParams();
return (
<div>
<h3>ID: {id}</h3>
</div>
);
}
Source
React Router change the URL but the component is not rendered
I have already looked for answer but none of those example is worked
Current React Router & React Router DOM version is 5.0.0
It's still plain create-react-app
I've tried to use Switch tag
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
const Index = () => {
return <h2>Home</h2>;
};
const About = () => {
return <h2>About</h2>;
};
const Users = () => {
return <h2>Users</h2>;
};
class App extends Component {
render() {
return (
<Router>
<div className="App">
<header className="App-header">
<li>
<Link to="/">
<h1>Home</h1>
</Link>
</li>
<li>
<Link to="/about">
<h1>About</h1>
</Link>
</li>
<li>
<Link to="/users">
<h1>Users</h1>
</Link>
</li>
</header>
<hr />
<Route exact path="/" Component={Index} />
<Route path="/about" Component={About} />
<Route path="/users" Component={Users} />
</div>
</Router>
);
}
}
export default App;
It wont render the component
Try setting the 'component' attribute with lowercase c
I think it's a simple mistake. You capitalized the attribute word component in your Routes.
I am trying my hands on React Nested routing & this is my how my app looks like
Posts.js (Parent (plural) Component) which is rendering fine.
import React from "react";
import { Route } from "react-router-dom";
import Post from "./Post";
import { Link, Switch } from "react-router-dom";
const Posts = ({ match }) => {
return (
<div>
<h2>Topics</h2>
<ul>
<li>
<Link to={`${match.url}/rendering`}>Rendering with React</Link>
</li>
<li>
<Link to={`${match.url}/components`}>Components</Link>
</li>
<li>
<Link to={`${match.url}/props-v-state`}>Props v. State</Link>
</li>
</ul>
<div>
<Route path={`${match.path}/:topicId`} component={Post} />
<Route
exact
path={match.path}
render={() => <h3>Please select a topic.</h3>}
/>
</div>
</div>
)}
export default Posts;
Post Component (Child (Singular) Component)
import React from "react";
const Post = ({ match }) => (
<div>
<h1>Child component</h1>
<h3>{match.params.topicId}</h3>
</div>
);
export default Post;
Not sure what config is lacking here, the parent component is rendering fine on the route while the child component content is not rendering
No error in console.
Parent Routing Configuration
import React from "react";
import { Switch, Route,NavLink } from "react-router-dom";
import Home from "./container/home/Home";
import About from "./container/about/About";
import Posts from "./container/post/posts";
import PageNotFound from "./container/Error/404";
const routes = () => (
<Switch>
<Route path="/" exact component={Home}></Route>
<Route path="/about" component={About}></Route>
<Route exact path="/post" component={Posts}></Route>
<Route component={PageNotFound}> </Route>*/}
</Switch>
)
export default routes;
App.js
import React, { Component } from 'react';
import './App.css';
import Layout from "./hoc/layout/layout";
class App extends Component {
render() {
return (
<Layout></Layout>
);
}}
export default App;
So the mistake in your code is pretty trivial. In the parent Route, i.e the Route that is rendering Posts component, you have an exact keyword and hence Routes like /posts/:postId won't match this exact Route with path /post and hence the inner Routes or nested Child Routes won't work
You need to change your Routes config like
const routes = () => (
<Switch>
<Route path="/" exact component={Home}></Route>
<Route path="/about" component={About}></Route>
<Route path="/post" component={Posts}></Route>
<Route component={PageNotFound}> </Route>*/}
</Switch>
)
export default routes;
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>