How to build react router project with bundler?
I developed the single page web app with react + react-router, and I built this project using Parcel for a product. However, the application doesn't work on dist directory made by parcel build index.html command.
When I click some member on the list page(/), I should move to member page(/member/:id).
import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { Home, Memeber } from './pages';
function App() {
return (
<Router>
<div>
<Route exact path="/" component={List} />
<Route path="/member/:id" component={Memeber} />
</div>
</Router>
);
}
The browser shows just a white screen without any error :(
In addition, I found that the list page rendered well if I remove exact. However, when I click a member from the list, the member page rendered below list page on the same screen.
I think this issue is concerned with the path. It works well with localhost server be opened by parcel index.html.
How do I solve this problem?
reactjs single-page-application react-router-v4
asked Nov 24 '18 at 17:36
Caesium133Caesium133
6119
add a comment |
I developed the single page web app with react + react-router, and I built this project using Parcel for a product. However, the application doesn't work on dist directory made by parcel build index.html command.
When I click some member on the list page(/), I should move to member page(/member/:id).
import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { Home, Memeber } from './pages';
function App() {
return (
<Router>
<div>
<Route exact path="/" component={List} />
<Route path="/member/:id" component={Memeber} />
</div>
</Router>
);
}
The browser shows just a white screen without any error :(
In addition, I found that the list page rendered well if I remove exact. However, when I click a member from the list, the member page rendered below list page on the same screen.
I think this issue is concerned with the path. It works well with localhost server be opened by parcel index.html.
How do I solve this problem?
reactjs single-page-application react-router-v4
asked Nov 24 '18 at 17:36
Caesium133Caesium133
6119
add a comment |
I developed the single page web app with react + react-router, and I built this project using Parcel for a product. However, the application doesn't work on dist directory made by parcel build index.html command.
When I click some member on the list page(/), I should move to member page(/member/:id).
import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { Home, Memeber } from './pages';
function App() {
return (
<Router>
<div>
<Route exact path="/" component={List} />
<Route path="/member/:id" component={Memeber} />
</div>
</Router>
);
}
The browser shows just a white screen without any error :(
In addition, I found that the list page rendered well if I remove exact. However, when I click a member from the list, the member page rendered below list page on the same screen.
I think this issue is concerned with the path. It works well with localhost server be opened by parcel index.html.
How do I solve this problem?
reactjs single-page-application react-router-v4
asked Nov 24 '18 at 17:36
Caesium133Caesium133
6119
I developed the single page web app with react + react-router, and I built this project using Parcel for a product. However, the application doesn't work on dist directory made by parcel build index.html command.
When I click some member on the list page(/), I should move to member page(/member/:id).
import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { Home, Memeber } from './pages';
function App() {
return (
<Router>
<div>
<Route exact path="/" component={List} />
<Route path="/member/:id" component={Memeber} />
</div>
</Router>
);
}
The browser shows just a white screen without any error :(
In addition, I found that the list page rendered well if I remove exact. However, when I click a member from the list, the member page rendered below list page on the same screen.
I think this issue is concerned with the path. It works well with localhost server be opened by parcel index.html.
How do I solve this problem?
reactjs single-page-application react-router-v4
reactjs single-page-application react-router-v4
asked Nov 24 '18 at 17:36
Caesium133Caesium133
6119
asked Nov 24 '18 at 17:36
Caesium133Caesium133
6119
asked Nov 24 '18 at 17:36
Caesium133Caesium133
6119
asked Nov 24 '18 at 17:36
Caesium133Caesium133
6119
asked Nov 24 '18 at 17:36
Caesium133Caesium133
6119
6119
add a comment |
add a comment |
0
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',
autoActivateHeartbeat: false,
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%2f53460757%2fhow-to-build-react-router-project-with-bundler%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
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.
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%2f53460757%2fhow-to-build-react-router-project-with-bundler%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
