score:1
you can write in app.js
import react from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './css/style.css';
import headermenu from './components/header';
import home from './pages/home';
import { about, aboutteam, aboutcontent } from "./pages/about";
import footer from './components/footer';
import { browserrouter, route, switch } from 'react-router-dom';
const aboutpage = () => (
<>
<about />
<aboutteam />
<aboutcontent />
</>
);
const app=()=>{
return(
<browserrouter>
<headermenu />
<switch>
<route path="/" exact component={home} />
<route path="/about" component={aboutpage} />
</switch>
<footer />
</browserrouter>
);
}
export default app;
score:0
if you want to import {about, aboutteam} from ...
, then you need to export 2 variables:
export const about = ...
export const aboutteam = ...
it's not advisable to have too many components in 1 file, but if you really want to import all, that is also possible:
import * as about from './about.js'
... <about.about /> ... <about.aboutteam /> ...
score:0
// about.js
const aboutteam = () => {
return (
<div classname="">
<h2>about team</h2>
</div>
);
};
const about = () => {
return (
<div classname="">
<h2>about page</h2>
</div>
);
};
export { about, aboutteam };
then import it as
import { about, aboutteam } from './about.js'
score:0
you can create more than one component in one file like this:
import react from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './css/style.css';
export const aboutteam =() => {
return (
<div>about team page </div>
)
}
export const about =()=>{
return(
<div classname="">
<h2>about page</h2>
</div>
);
}
all things are looking fine, but you should not leave classname
empty and inside browserrouter
there should be only one wrapper so you should wrap all elements inside a div
.
score:0
use export instead of export default to export both the component from the same file (about.js)
//about.js
import react from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './css/style.css';
const about=()=>{
return(
<div classname="">
<h2>about page</h2>
</div>
);
}
const aboutteam=()=>{
return(
<div classname="">
<h2>about team</h2>
</div>
);
}
export {about, aboutteam};
and then import it in the file you need,
import {about, aboutteam} from "./about.js";
apart from the solution, one more thing to keep in mind is
component exported using export default, is imported like
import about from "./path of file";
component exported using export, is/are imported like
import {about, aboutteam} from "./path of file";
Source: stackoverflow.com
Related Query
- How can I display more than one component from the same file in the App.js?
- How can i import more than one component from the same folder?
- How can i pass different props to more than one children component from the parent one in React?
- How can I get more than one value from the Redux store in a single statement?
- How can i extract more than one key from an Object and print the output
- Solve having more than one copy of React in the same app
- How can I use react useContext , to show data from context, in the same component
- how to get a Component variable from another component but their both in the same file React
- How to pass route parameters from one Component and display in the other
- How can we import the image from one js file to another js file
- want to go to SignUp page when clicked on SignUp from the App component in React can some one rectify the code accordingly
- How can I get more than one document from mongoDB?
- How can I stop the Select component from closing when I clicked one of its item(Input element) - react antd
- How can I pass the state from one component to another and how can I modify the state?
- How I can create one component for different JSON files with the same structure
- How can display one or more details in one component - React Native?
- React Functional Components, how to export more than one component per file
- React/Material-UI: How can I map multiple tables from a JSON object with more than one array of data?
- How can I update the state of my container component from one of its children in React?
- How do I generate more than one dom element from a react.rb component
- How can i pass and display data from one component to other component?
- How do I extract the file names from an "upload file" component and display them in a list on the UI?
- How can I pass the value from my function to another component in another file
- How can I modify the props of one child component from a separate child component?
- How can I display both of JSX elements in the same row without one or another?
- how can i send an api call from the supreme function to another component called product to change a mock data called cart: true and display in cart
- How to pass a state value from one component to another component at the same level
- how can i get the more than one data row value based on selected checkbox and store in useState (react-table-boostrap2)
- How can I display one item from this array in the render?
- How to allow input type=file to select the same file in react component
More Query from same tag
- Check if value is a valid React Child
- Updating array value inside array of objects
- How to populate <SelectInput> choices with already fetched data
- How to combine two arrays into a single? (React JS)
- Currying styled Template Literal function
- How to set custom spacing margin value in Material UI Grid
- In React, how can a parent change prop or state values on another component programatically?
- Div background-color transition not working
- if taking 0 integer value as null
- history parameter has been removed from router in version 6.2.1?
- React function components naming issue
- Reactjs: Pass functional component to another functional component to
- How to persist counter value when the state changes?
- How do I change the icon color onHover with styling in react?
- runtime.js:7 Uncaught Error: [RequireAuth] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>
- how to reset counter on button click in react
- How to write validations for email and password using react hooks
- what is the proper way to publish a React component module in NPM without external dependencies inside?
- Webpack Error React & ES6 Previously working under Babelify
- JSON object returning undefined even though it is there(NASA API and React)
- Delete an Item in a Nested Object in Redux State
- How to use portals in Next.js in getting the child element outside the immediate parent container?
- How can I make multiple styling for only one prop in React Styled Components?
- Bidirectional data flow in react js
- How can I avoid this infinite update loop in React.js?
- Set version of EcmaScript generated by Babel, in react app
- React - How to break a line in a cell of a material ui table
- React onCLick() get buttons id
- React Lifecycles managing intervals with changing values
- Font not loading in Reactjs