Im new to react and in the application im working im using a class component Summary
class SummaryList extends React.Component {
//code for the summarylist component here
}
class Summary extends React.Component {
render() {
return (
<Switch>
<Route path="/apply" component={Advance} />
<Route path="/summary/edit/:id" component={EAdvance} />
<Route path="/summary" component={SummaryList} />
</Switch>
);
}
}
export default Summary;
Im using this Summary in other page by importing it and using the component as Summary...
Now the isssue here is i need to use the SummaryList present in Summary in other place....when im trying to import Summay again....its stopped displaying the first place tried with exporting SummaryList seperately below export default Summary...by putting as export {SummaryList} and tried importing it in the second place and in the first place used Summary only....but its not working
If i need to reuse the component what shoud i do...cant i import the same component two times in my application
Yes you can export and import different components and render it multiple times.
Eg:-
App.js
import React, { Component } from 'react';
import Header from './Header';
import Main from './Main';
class App extends Component {
render() {
return (
<div>
<Header />
<Main />
</div>
);
}
}
export default App;
Header.js
import React, { Component } from 'react';
import Main from './Main';
class Header extends Component {
render() {
return (
<header>
<h1>Header Component</h1>
<Main/>
</header>
);
}
}
export default Header;
Main.js
import React, { Component } from 'react';
class Main extends Component {
render() {
return (
<main>
<p>Main Component</p>
</main>
);
}
}
export default Main;
Here Main in rendered in App.js and Header.js
Related
I'm just trying to load the react-bootstrap component , and it doesn't seem to be loading. I feel like I'm missing something obvious. I have installed react-bootstrap and bootstrap. I'm trying to wrap the and export it to App.js
Here is my Navbar component and App.js respectively:
import { Navbar } from 'react-bootstrap';
import { Component } from 'react';
class NavigationBar extends Component{
render(){
return(
<Navbar>
hello
</Navbar>
)
}
}
export default NavigationBar;
import React from 'react';
import NavigationBar from './components/NavigationBar.js'
import { Navbar } from 'react-bootstrap'
function App() {
return (
<div className="App">
<header className="App-header">
<NavigationBar></NavigationBar>
</header>
</div>
);
}
export default App;
Change this line => import React, { Component } from 'react';
import React, { Component } from 'react';
import { Navbar } from 'react-bootstrap';
class NavigationBar extends Component{
render(){
return(
<Navbar>
home
</Navbar>
)
}
}
export default NavigationBar;
I am trying to split the routing based on area, like if I am in the user section
http://localhost:3000/user
then I want to handle all the routes like
http://localhost:3000/user/:id
http://localhost:3000/user/create
http://localhost:3000/user/:id/edit
http://localhost:3000/user/:id/delete
http://localhost:3000/user/filtered
in the user component itself. But it is not working.
If I am keeping
<Route path="/user" component={UserList} />
<Route path="/user/create" component={UserCreate} />
inside index.js file (main file, where other routes are also defined), it is working,
but if I am moving the routes related to User in UserList component as below:
import React from 'react';
import { Link, Route } from 'react-router-dom';
import UserCreate from './create';
class UserList extends React.Component {
render() {
return (
<div>
<h1>user List will be here</h1>
<Link to="/user/create">create User</Link>
<Route path="/user/create" component={UserCreate}/>
</div>
);
}
}
export default UserList;
and UserCreate
import React from 'react';
import { Link } from 'react-router-dom';
class UserCreate extends React.Component {
render() {
return (
<div>
<Link to="/user">Back</Link>
<h1>form design wil go here</h1>
</div>
);
}
}
export default UserCreate;
it is displaying the /user, but after redirecting to /user/create, it is not working
I have tried this and this, and some more similar, but they are not useful to me.
here is a working example, I have tried.
I am not sure, even this is possible or not.
You have written wrong path in to , it should be user instead of usre
render() {
return (
<div>
<h1>user List will be here</h1>
<Link to="/user/create">create User</Link>
<Route path="/user/create" component={UserCreate} />
</div>
);
}
You're using export default so
import UserList from './user/userList';
import UserCreate from './create';
instead of
import { UserList } from './user/userList';
import {UserCreate} from './create';
I have a mini project in which the first page having title homepage but the next page contacts is click through link it retains the homepage as title. I've explicitly declared title as Contact Us but then also it shows Homepage.
Here's my code:
For App.js:
import React, { Component } from 'react';
import {BrowserRouter as Router, Route, Switch, Link} from 'react-router-dom';
import ContactUs from '/Users/yashchoksi/Documents/linking/src/ContactUs';
class App extends Component {
render() {
return (
<Router>
<div>
<title>HomePage</title>
<Link to="/src/ContactUs">Contact Us</Link>
<Switch>
<Route exact path="/src/ContactUs" component={ContactUs}/>
</Switch>
</div>
</Router>
);
}
}
export default App;
And for Contact Us page:
import React, { Component } from 'react';
class ContactUs extends Component {
render(){
return(
<div>
<title>ContactUs</title>
Hello From COntactUs.
</div>
);
}
}
export default ContactUs;
Please see and tell me how to declare title for dynamic naming!
You can set it in your component:
import React, { Component } from 'react';
class ContactUs extends Component {
componentDidMount() {
document.title = 'Contact Us'
}
render(){
return(
<div>
<title>ContactUs</title>
Hello From COntactUs.
</div>
);
}
}
export default ContactUs;
Just use the following code:
componentWillMount(){
document.title="Title name";
}
Edit:
componentWillMount will be deprecated in React 17, so you can use componentDidMount instead.
For better api and server rendering, use react-helmet. It is also a one-liner at its simplest.
I am trying to wrap my routes so I can render something on every route, such as a header or any static content. I have looked at this post here:
Nested Routes in React Router v4
I tried wrapping my routes like they have there, but now the only thing that shows is the wrapping component, none of the children show.
So the only thing that shows is on the / and /dashboard routes:
Home Component
Dashboard
Here is the code:
Wrapping routes:
<Home>
<Switch>
<Route path="/dashboard" component={Layout} />
<Route component={NotFound} />
</Switch>
</Home>
Home component:
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
class Home extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h2>Home component</h2>
<Link to="/dashboard">Dashboard</Link>
</div>
);
}
}
export default Home;
Layout component:
import React, { Component } from 'react';
class Layout extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h2>Layout Component</h2>
<h2>Layout Component</h2>
</div>
);
}
}
export default Layout;
Have you tried putting {this.props.children} in your Home component?
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
class Home extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h2>Home component</h2>
<Link to="/dashboard">Dashboard</Link>
{this.props.children}
</div>
);
}
}
export default Home;
Your layout needs a component, or instruction to know where to render the children.
Otherwise the router won't know where the children routes need to appear. The child component is passed to the layout as a property called children. You need to add this where you want it to appear:
{props.children}
Like:
import React, { Component } from 'react';
class Layout extends Component {
constructor(props) {
super(props);
}
static propTypes = {
children: PropTypes.node.isRequired,
}
render() {
return (
<div>
<h2>Layout Component</h2>
{props.children}
</div>
);
}
}
export default Layout;
I personally prefer using . react router config But if you use the bare router that should do it.
New to react.js and trying to following tutorial. Unfortunately the code given in the page didn't work. webpack complained
ERROR in ./App.jsx
Module build failed: SyntaxError: Only one default export allowed per module.
Wonder how to fix it. Thanks.
=== App.jsx====
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router'
class App extends React.Component {
render() {
return (
<div>
<ul>
<li><Link to = "/home">Home</Link></li>
<li><Link to = "/about">About</Link></li>
<li><Link to = "/contact">Contact</Link></li>
</ul>
{this.props.children}
</div>
)
}
}
export default App;
class Home extends React.Component {
render() {
return (
<div>
<h1>Home...</h1>
</div>
)
}
}
export default Home;
class About extends React.Component {
render() {
return (
<div>
<h1>About...</h1>
</div>
)
}
}
export default About;
class Contact extends React.Component {
render() {
return (
<div>
<h1>Contact...</h1>
</div>
)
}
}
export default Contact;
=== main.js ===
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App/>, document.getElementById('app'));
UPDATE1
I commented out all the export default and added the following at the end
module.exports = {
App: App,
Home: Home,
About: About,
Contact: Contact
}
Now there is no compile error but the web page is a blank. I am not sure what is wrong here.
You can have only one default export which you declare like:
export default App;
or
export default class App extends React.Component {...
and later do import App from './App'
If you want to export something more you can use named exports which you declare without default keyword like:
export {
About,
Contact,
}
or:
export About;
export Contact;
or:
export const About = class About extends React.Component {....
export const Contact = () => (<div> ... </div>);
and later you import them like:
import App, { About, Contact } from './App';
EDIT:
There is a mistake in the tutorial as it is not possible to make 3 default exports in the same main.js file. Other than that why export anything if it is no used outside the file?. Correct main.js :
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router'
class App extends React.Component {
...
}
class Home extends React.Component {
...
}
class About extends React.Component {
...
}
class Contact extends React.Component {
...
}
ReactDOM.render((
<Router history = {browserHistory}>
<Route path = "/" component = {App}>
<IndexRoute component = {Home} />
<Route path = "home" component = {Home} />
<Route path = "about" component = {About} />
<Route path = "contact" component = {Contact} />
</Route>
</Router>
), document.getElementById('app'))
EDIT2:
another thing is that this tutorial is based on react-router-V3 which has different api than v4.
When you
import App from './App.jsx';
That means it will import whatever you export default. You can rename App class inside App.jsx to whatever you want as long as you export default it will work but you can only have one export default.
So you only need to export default App and you don't need to export the rest.
If you still want to export the rest of the components, you will need named export.
https://developer.mozilla.org/en/docs/web/javascript/reference/statements/export
The main issue is that you have used more than one export default keyword.
You could use:
export default App
export {home}
etc etc