There is only one layout page that you need to customize and do not match multiple at the same time
up vote
2
down vote
favorite
It's like I'm trying right now and doing that, for example, the front page, which is my app.jsx, which is being sent via Router.jsx and so on to Content.jsx. Content must contain Narbar, Footer and Meta as title and description. So I only have to work with design somewhere instead of being located in several places.
Image here to show what i try.
The problem is just that I want to send the title and description with the over to the content.jsx file that make App.jsx only content content and description and what should be on each page.
Router.jsx
import React from 'react';
import BrowserRouter, Route, Switch from 'react-router-dom';
//home site here
import Home from './Home/App';
//Nyheder
import Nyheder from './Nyheder/index';
import Nyhed from './Nyheder/nyhed';
//Account
import Login from './Account/Login';
import Forget from './Account/Forget';
import Create from './Account/Create';
//Team site
import Team from './Team/index';
//Error
import Error404 from './404/error404';
const Router = () => (
<BrowserRouter>
<Switch>
<Route exact path="/" component=Home />
<Route path="/Account/Login" component=Login />
<Route path="/Account/Forget" component=Forget/>
<Route path="/Account/Create" component=Create/>
<Route path="/Team/:Url" component=Team/>
<Route path="/Raadgivning/:Url" component=Team/>
<Route path="/Nyheder" component=Nyheder/>
<Route path="/Nyhed/:Url/:Id" component=Nyhed/>
<Route component=Error404 />
</Switch>
</BrowserRouter>
);
export default Router;
Content.jsx
import React, Component from 'react'
import DocumentMeta from 'react-document-meta';
//DESIGN
import Header from '../component/Header/Header';
import Footer from '../component/Footer/Footer';
import Section from '../component/Header/Section';
import Router from '../component/Router';
export default class content extends Component
render(...props)
return (
<DocumentMeta ...props.meta>
<Header />
<Section title=props.meta.title />
<Router/>
<Footer />
</DocumentMeta>
);
App.jsx (Home site)
import React, Component from 'react';
//view helper
import CreateUser from '../Helper/_viewHelper/createUsers';
class App extends Component
render()
const meta =
title: 'Forside',
description: 'I am a description, and I can create multiple tags',
;
return (
<React.Fragment>
<div className="container">
<h2>Toppen here</h2>
</div>
<CreateUser/>
<div className="container">
hej
</div>
</React.Fragment>
);
export default App;
reactjs
add a comment |
up vote
2
down vote
favorite
It's like I'm trying right now and doing that, for example, the front page, which is my app.jsx, which is being sent via Router.jsx and so on to Content.jsx. Content must contain Narbar, Footer and Meta as title and description. So I only have to work with design somewhere instead of being located in several places.
Image here to show what i try.
The problem is just that I want to send the title and description with the over to the content.jsx file that make App.jsx only content content and description and what should be on each page.
Router.jsx
import React from 'react';
import BrowserRouter, Route, Switch from 'react-router-dom';
//home site here
import Home from './Home/App';
//Nyheder
import Nyheder from './Nyheder/index';
import Nyhed from './Nyheder/nyhed';
//Account
import Login from './Account/Login';
import Forget from './Account/Forget';
import Create from './Account/Create';
//Team site
import Team from './Team/index';
//Error
import Error404 from './404/error404';
const Router = () => (
<BrowserRouter>
<Switch>
<Route exact path="/" component=Home />
<Route path="/Account/Login" component=Login />
<Route path="/Account/Forget" component=Forget/>
<Route path="/Account/Create" component=Create/>
<Route path="/Team/:Url" component=Team/>
<Route path="/Raadgivning/:Url" component=Team/>
<Route path="/Nyheder" component=Nyheder/>
<Route path="/Nyhed/:Url/:Id" component=Nyhed/>
<Route component=Error404 />
</Switch>
</BrowserRouter>
);
export default Router;
Content.jsx
import React, Component from 'react'
import DocumentMeta from 'react-document-meta';
//DESIGN
import Header from '../component/Header/Header';
import Footer from '../component/Footer/Footer';
import Section from '../component/Header/Section';
import Router from '../component/Router';
export default class content extends Component
render(...props)
return (
<DocumentMeta ...props.meta>
<Header />
<Section title=props.meta.title />
<Router/>
<Footer />
</DocumentMeta>
);
App.jsx (Home site)
import React, Component from 'react';
//view helper
import CreateUser from '../Helper/_viewHelper/createUsers';
class App extends Component
render()
const meta =
title: 'Forside',
description: 'I am a description, and I can create multiple tags',
;
return (
<React.Fragment>
<div className="container">
<h2>Toppen here</h2>
</div>
<CreateUser/>
<div className="container">
hej
</div>
</React.Fragment>
);
export default App;
reactjs
npmjs.com/package/react-helmet ?
– Roman Pokrovskij
Nov 11 at 11:06
add a comment |
up vote
2
down vote
favorite
up vote
2
down vote
favorite
It's like I'm trying right now and doing that, for example, the front page, which is my app.jsx, which is being sent via Router.jsx and so on to Content.jsx. Content must contain Narbar, Footer and Meta as title and description. So I only have to work with design somewhere instead of being located in several places.
Image here to show what i try.
The problem is just that I want to send the title and description with the over to the content.jsx file that make App.jsx only content content and description and what should be on each page.
Router.jsx
import React from 'react';
import BrowserRouter, Route, Switch from 'react-router-dom';
//home site here
import Home from './Home/App';
//Nyheder
import Nyheder from './Nyheder/index';
import Nyhed from './Nyheder/nyhed';
//Account
import Login from './Account/Login';
import Forget from './Account/Forget';
import Create from './Account/Create';
//Team site
import Team from './Team/index';
//Error
import Error404 from './404/error404';
const Router = () => (
<BrowserRouter>
<Switch>
<Route exact path="/" component=Home />
<Route path="/Account/Login" component=Login />
<Route path="/Account/Forget" component=Forget/>
<Route path="/Account/Create" component=Create/>
<Route path="/Team/:Url" component=Team/>
<Route path="/Raadgivning/:Url" component=Team/>
<Route path="/Nyheder" component=Nyheder/>
<Route path="/Nyhed/:Url/:Id" component=Nyhed/>
<Route component=Error404 />
</Switch>
</BrowserRouter>
);
export default Router;
Content.jsx
import React, Component from 'react'
import DocumentMeta from 'react-document-meta';
//DESIGN
import Header from '../component/Header/Header';
import Footer from '../component/Footer/Footer';
import Section from '../component/Header/Section';
import Router from '../component/Router';
export default class content extends Component
render(...props)
return (
<DocumentMeta ...props.meta>
<Header />
<Section title=props.meta.title />
<Router/>
<Footer />
</DocumentMeta>
);
App.jsx (Home site)
import React, Component from 'react';
//view helper
import CreateUser from '../Helper/_viewHelper/createUsers';
class App extends Component
render()
const meta =
title: 'Forside',
description: 'I am a description, and I can create multiple tags',
;
return (
<React.Fragment>
<div className="container">
<h2>Toppen here</h2>
</div>
<CreateUser/>
<div className="container">
hej
</div>
</React.Fragment>
);
export default App;
reactjs
It's like I'm trying right now and doing that, for example, the front page, which is my app.jsx, which is being sent via Router.jsx and so on to Content.jsx. Content must contain Narbar, Footer and Meta as title and description. So I only have to work with design somewhere instead of being located in several places.
Image here to show what i try.
The problem is just that I want to send the title and description with the over to the content.jsx file that make App.jsx only content content and description and what should be on each page.
Router.jsx
import React from 'react';
import BrowserRouter, Route, Switch from 'react-router-dom';
//home site here
import Home from './Home/App';
//Nyheder
import Nyheder from './Nyheder/index';
import Nyhed from './Nyheder/nyhed';
//Account
import Login from './Account/Login';
import Forget from './Account/Forget';
import Create from './Account/Create';
//Team site
import Team from './Team/index';
//Error
import Error404 from './404/error404';
const Router = () => (
<BrowserRouter>
<Switch>
<Route exact path="/" component=Home />
<Route path="/Account/Login" component=Login />
<Route path="/Account/Forget" component=Forget/>
<Route path="/Account/Create" component=Create/>
<Route path="/Team/:Url" component=Team/>
<Route path="/Raadgivning/:Url" component=Team/>
<Route path="/Nyheder" component=Nyheder/>
<Route path="/Nyhed/:Url/:Id" component=Nyhed/>
<Route component=Error404 />
</Switch>
</BrowserRouter>
);
export default Router;
Content.jsx
import React, Component from 'react'
import DocumentMeta from 'react-document-meta';
//DESIGN
import Header from '../component/Header/Header';
import Footer from '../component/Footer/Footer';
import Section from '../component/Header/Section';
import Router from '../component/Router';
export default class content extends Component
render(...props)
return (
<DocumentMeta ...props.meta>
<Header />
<Section title=props.meta.title />
<Router/>
<Footer />
</DocumentMeta>
);
App.jsx (Home site)
import React, Component from 'react';
//view helper
import CreateUser from '../Helper/_viewHelper/createUsers';
class App extends Component
render()
const meta =
title: 'Forside',
description: 'I am a description, and I can create multiple tags',
;
return (
<React.Fragment>
<div className="container">
<h2>Toppen here</h2>
</div>
<CreateUser/>
<div className="container">
hej
</div>
</React.Fragment>
);
export default App;
reactjs
reactjs
asked Nov 10 at 21:58
J. Petersen
214
214
npmjs.com/package/react-helmet ?
– Roman Pokrovskij
Nov 11 at 11:06
add a comment |
npmjs.com/package/react-helmet ?
– Roman Pokrovskij
Nov 11 at 11:06
npmjs.com/package/react-helmet ?
– Roman Pokrovskij
Nov 11 at 11:06
npmjs.com/package/react-helmet ?
– Roman Pokrovskij
Nov 11 at 11:06
add a comment |
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53243821%2fthere-is-only-one-layout-page-that-you-need-to-customize-and-do-not-match-multip%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53243821%2fthere-is-only-one-layout-page-that-you-need-to-customize-and-do-not-match-multip%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
npmjs.com/package/react-helmet ?
– Roman Pokrovskij
Nov 11 at 11:06