I've been searching on internet for this problem and all I am getting is there is no need to create other pages because react is meant for single page application or solutions that change the content of the page but not the page (url) itself. What I really want to know is : When I create an app with create-react-app , I get all the setup , now can I create a new html file like the default index.html is created in public directory and render components to that new file ?
Asked
Active
Viewed 7,098 times
1
-
You sure can. All you need to do is call `ReactDOM.render` with the root element you want your React app or component to be attached to on that page, but if you want a single page app you might want to look at `react-router` or `reach-router` – WilomGfx Aug 04 '19 at 16:42
-
@WilomGfx if I try it on another page but index it doesn't detect or can't find element with the given id – Hiken No Ace Aug 04 '19 at 16:56
-
`Can't find element with the given id`, this is becuase we have setting in `webpack.config` file for `index.html`. If You want to change the file, you must add that file in `webpack.config` file and it will work. – ravibagul91 Aug 05 '19 at 02:44
2 Answers
0
What CRA is doing is using webpack to bundle your code starting from (default) src/index.js file. It means that it creates one (or multiple if lazy loaded) bundles, that are loaded into public/index.html file. You can check it by viewing build/index.html and looking for scripts loaded before the </body> tag.
The main entry point for React is
ReactDOM.render(<App />, document.getElementById('root'));
You can have multiple entry points in one HTML file. If you want to have multiple entry points split across multiple files - I am afraid you will need to eject your CRA app and tweak webpack config by yourself.
I think similar problem was described here: Multiple modules for multiple entry points in webpack config for reactjs app
But maybe you are just looking for react-router? You can also adjust your server config to redirect all paths to index.html and let react-router handle displaying proper component. E.g. How to setup apache server for React route?
Łukasz Szcześniak
- 1,417
- 11
- 23
-
-
Well, there is stuff like react-app-rewired and customize-cra, but I do not know if they allow for such customisation. – Łukasz Szcześniak Aug 04 '19 at 21:16
-1
From your question, it's not quite clear for what exact reason you need multiple HTML files, but consider this from the CRA readME:
If you want to do server rendering with React and Node.js, check out Next.js or Razzle. Create React App is agnostic of the backend, and just produces static HTML/JS/CSS bundles.
If your website is mostly static (for example, a portfolio or a blog), consider using Gatsby instead. Unlike Create React App, it pre-renders the website into HTML at the build time.
So I think there is a need to understand not whether it is possible to do this with CRA? but Why do you need it? And maybe there is a tool more suitable for your case than CRA.
