Fixed bug causing routes not to render on change (#224)

* Fixed bug causing routes not to render on change

* Added unlisten to store cleanup and updated await to give component time to unmount in test

Author: AlexanderKaran

examples/basic-routing/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import { About } from './about';
 import { Home } from './home';
@@ -42,4 +42,9 @@ const App = () => {
   );
 };
 
-render(<App />, document.getElementById('root'));
+const container = document.getElementById('root');
+if (!container)
+  throw new Error('No root element found to render basic routing example');
+
+const root = createRoot(container);
+root.render(<App />);

examples/hash-routing/index.tsx

@@ -1,7 +1,7 @@
 import { createHashHistory as createHashHistory4 } from 'history';
 import { createHashHistory as createHashHistory5 } from 'history-5';
 import React from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import { About } from './about';
 import { Home } from './home';
@@ -42,4 +42,9 @@ const App = () => {
   );
 };
 
-render(<App />, document.getElementById('root'));
+const container = document.getElementById('root');
+if (!container)
+  throw new Error('No root element found to render hash routing example');
+
+const root = createRoot(container);
+root.render(<App />);

examples/hooks/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import { shouldReloadWhenRouteMatchChanges } from '../../src/utils';
 
@@ -68,4 +68,9 @@ const App = () => {
   );
 };
 
-render(<App />, document.getElementById('root'));
+const container = document.getElementById('root');
+if (!container)
+  throw new Error('No root element found to render hooks example');
+
+const root = createRoot(container);
+root.render(<App />);

examples/hydration/index.tsx

@@ -1,6 +1,6 @@
 import { createMemoryHistory } from 'history';
 import React from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { defaultRegistry } from 'react-sweet-state';
 
 import { homeRoute } from './routes';
@@ -53,7 +53,12 @@ const main = async () => {
     );
   };
 
-  render(<App />, document.getElementById('root'));
+  const container = document.getElementById('root');
+  if (!container)
+    throw new Error('No root element found to render hydration example');
+
+  const root = createRoot(container);
+  root.render(<App />);
 };
 
 main();

examples/routing-with-resources/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import { homeRoute, aboutRoute } from './routes';
 
@@ -28,4 +28,9 @@ const App = () => {
   );
 };
 
-render(<App />, document.getElementById('root'));
+const container = document.getElementById('root');
+if (!container)
+  throw new Error('No root element found to render resources example');
+
+const root = createRoot(container);
+root.render(<App />);