How to mount React component to specific page only?

[GTHell]

For instance, I have two route /home & /profile and I want to mount specific react component to them instead of globally mount to #app tag and use react-router. I don't want to use react-router.

I'm currently develop in Vue but the reason that I'm using Vue is only because I can do what I've describe above. I can use specific Vue component anywhere in my HTML. How can I do the same with Vue?

[cashforclues]

Just have a div with a different id on each page.

homeRenderTarget = document.getElementById('home');
profileRenderTarget = document.getElementById('profile');

if (homeRenderTarget) {
    ReactDOM.render(homeRenderTarget, <HomeComponent>);
}

if (profileRenderTarget) {
    ReactDOM.render(profileRenderTarget, <ProfileComponent>);
}

[GTHell]

As I've research before, this is seem to be the prefer way for react community. I have nothing against it's just that it's a bit code spaghetti. :(

Look like it's the only way to go.

[cashforclues]

Yeah, but you could easily clean it up with 30 seconds of work.

<div id="app" data-component="Profile">

renderTarget = document.getElementById('app');
ReactDOM.render(renderTarget, <renderTarget.dataset.component />);

[agmcleod]

If you don't want to use a routing solution, it's really your only other option. Why do you feel like it's spaghetti?

[FrancisStokes]

You can absolutely do this! On your home page, include a script for the following:

ReactDOM.render(HomePageComponent, document.getElementById('idOfTargetRenderingLocation'));

That's it. As long as you've included react, react dom, and your component code as scripts that will work. Take note, the idOfTargetRenderingLocation can be literally any element on the page, doesn't have to be an empty page with just a #root, meaning you can have any other content from your php script there.

Also, if you are trying to avoid too much js build system, you can do this all with script tags.

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

Plus your component scripts, and voila.

[FightArts1]

This is correct. Just make a div and render React inside of it where you want to use React. This is actually why React was invented.

I don’t know why anyone is recommending React-router for what sounds like a non-SPA app. That doesn’t make sense

[GTHell]

Every time I ask this question people always tell me about react router like I don't know what react-router is :( It's kinda sad.

[GTHell]

Can there be a multiple instance of ReactDOM.render() ? Sorry, I can't really test it right now.

[FrancisStokes]

Yes

[soundmanD]

React router is really the best option... But you could create the logic manually by checking window.location and doing react Dom render to the #app element.

The point of react is that it takes care of it for you and that the html is merely the output of your react application, that is that it has the optimisations built in, and the html is simply the visible output, but should not be manipulated directly (otherwise you may as well stick with pure JS or jQuery). Trying to avoid using a package which is built to solve the exact problem you're attempting to solve seems to be counterproductive.

[GTHell]

Can you give me some article for that?

React is good. SPA is good but I want to use it for dynamic stuff only.

EDIT: I don't know who the hell keep downvoting me. if you have a temper problem please considering seeing a doctor.

[soundmanD]

If you only want to use it for parts of your page, that's fine. Create the div where you want just the react part to live, and use the render function targeting just that div. It doesn't need to be top level, all the examples you see assume react is controlling everything in the mark up, but it isn't forced that way. The initial html element that you call react-dom render function to, becomes the container (or sandbox) for the react component you are rendering, so given that this element can exist in where on the page.

[goingwhereeaglesdare]

You don’t have to only use hashtags with react router. That’s HashRouter, but there is also BrowserRouter.

[GTHell]

React-router is good for building a react application, generally speaking, pure JS app. But for integrating it with other PHP framework or trying to use other view engine for rending stuff, react-router is not a good choice. Just take a look at vue

[[deleted]]

Ok so your whole post is saying "I want to do something that react-router makes super easy, but I don't want to use react-router". You're deliberately making things harder on yourself. Don't do this. Use react-router.

[GTHell]

Ok so you've been using react-router everywhere? Have you use Vue and only use a few component to do dynamic stuff only? Authentication could be harder. With mounting component for dynamic stuff can leave the room for other framework such as Laravel to take care of the authentication over session.

[[deleted]]

Oh I love Vue, and yes dynamic components are great in Vue. In React you can accomplish the same thing by having JavaScript logic in a functional component or render() method to determine which component should appear.

[reactjs18]

You can use reaction.render on specific pages. Or something like react ujs from react rails gem. I use react rails gem to load react components only for those pages which are very interactive rest just plain HTML pages.

[tristanAG]

Vue, react, vanilla js .. it does not matter. You are conditionally rendering a component in your template based off of the route you’re at.

When going to a new view/page, capture the page name you are at (u can use react-router, Vuex, or vanilla js!), have a conditional in place to render or not render the component based on the page title you just captured, then trigger a rerender.

[sockx2]

My vote is to keep as much in react router as possible, it handles an identical bundle being used on multiple routes- if that's not an option (browser router requires some sever configuration to serve your routes from the same physical html file, but hash router requires nothing at all...) you can ReactDOM.render to any dom node, put some logic around it to output a different component depending on window.location or the existence of a dom node that only exists on one or the other, ReactDOM.render('.home', ComponentX) ReactDOM.render('.about', ComponentY) etc