State and routing for imported React components - javascript

I have to write an integrated chat module that has two versions - a small in-site window (like facebook messenger) and full version that is opened in a new tab (a new react-router route). So, this module exports two components: <ChatWindow /> and <ChatFullView />for these views respectively.
// core application
import {ChatWindow, ChatFullView} from 'chat-module';
// <PageContentWithChat /> contains imported <ChatWindow />
<Switch>
<Route path='/' component={PageContentWithChat} />
<Route path='/fullview' component={ChatFullView} />
</Switch>
So, the question is:
Where should I declare the redux store and manage it for both of them? (They must have one united store because the messages from the window version should be rendered in full view and vice versa)
EDIT:
I wanted to control the module from the inside:
// in module
const store = createStore(reducer);
....
<Provider store={store}>
<ChatWindow />
<ChatFullView />
</Provider>
But I'm afraid I won't be able to export these components separately as they are wrapped with <Provider />. How is it possible to solve this?

react-redux makes the store available through context via the Provider component.
Assuming <ChatWindow /> and <ChatFullView /> are connected components, you would wrap everything in <Provider />, passing in your store as a prop.
Of course, you can organize all of this into different files, but this is the general idea.
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { Switch, Route } from 'react-router';
import { BrowserRouter } from 'react-router-dom';
import { createStore } from 'redux';
import PageContentWithChat from 'path-to-page-content-with-chat';
import { ChatWindow, ChatFullView } from 'chat-module';
const store = createStore(/* reducers + initial message state passed in here... */);
const container = document.getElementById(/* id of your app container */);
const component = (
<Provider store={store}>
<BrowserRouter>
<Switch>
<Route path='/' component={PageContentWithChat} />
<Route path='/fullview' component={ChatFullView} />
</Switch>
</BrowserRouter>
</Provider>
);
render(component, container);

Related

React components not showing up on the screen [duplicate]

Im routing a page to the root, but its showing up as a blank page, no matter what js file I use. Not sure whats wrong, havent used react since last year but looks like they've updated react-router-dom so it doesnt use Switch anymore. Anyone know the correct syntax so the page shows up? Here are the files:
WebRoutes.js
import React from "react";
import { Routes, Route } from 'react-router-dom';
import { useNavigate } from "react-router-dom";
// Webpages
import App from './App';
import Welcome from './welcome';
import SignUp from './Signup'
export default function WebRoutes() {
return (
<Routes>
<Route path='/'>
<Welcome />
</Route>
</Routes>
);
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import WebRoutes from './WebRoutes';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<WebRoutes />
</React.StrictMode>,
document.getElementById('root')
);
In react-router-dom#6 the Route components don't render routed content as children, they use the element prop. Other Route components are the only valid children of a Route in the case of building nested routes.
export default function WebRoutes() {
return (
<Routes>
<Route path='/' element={<Welcome />} />
</Routes>
);
}
Ensure that you have rendered a router around your app.
import { BrowserRouter as Router } from 'react-router-dom';
ReactDOM.render(
<React.StrictMode>
<Router>
<WebRoutes />
</Router>
</React.StrictMode>,
document.getElementById('root')
);

React router error "useRoutes() may be used only in the contect of a <Router> component."

So, I was making this website when I saw these BIG red errors in the console ( I know a nightmare :( )
The error said this:
Uncaught Error: useRoutes() may be used only in the context of a <Router> component.
And I didn't even use a "useRoutes" hook.
Anyways here's my code:
import Links from "./components/Links"
import Addition from "./pages/Addition"
import "./styles/App.css"
import { BrowserRouter as Router, Switch, Route, Routes } from 'react-router-dom';
function App() {
return (
<div>
<h1>Chose your operation:</h1>
<div className="cards">
<Routes>
<Route path="/addition" element={Addition} />
</Routes>
</div>
</div>
)
}
export default App;
The Routes component uses the useRoutes. Routes needs to be rendered within a routing context provided by a router component.
Additionally the Addition (sorry, no pun intended) needs to be passed to the element prop as JSX. This was one of the breaking changes in the Route component API from v5 to v6.
Example:
import Links from "./components/Links"
import Addition from "./pages/Addition"
import "./styles/App.css"
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
function App() {
return (
<Router> // <-- render app into Router component
<div>
<h1>Chose your operation:</h1>
<div className="cards">
<Routes>
<Route
path="/addition"
element={<Addition />} // <-- passed as JSX
/>
</Routes>
</div>
</div>
</Router>
)
}

Pass prop from top level of react project from file using render from "react-dom"

I'm currently working on a personal project just to get a bit better using react.
I use react-router for navigation. My index.js file has the following
import { render } from "react-dom";
import App from "./App";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import TukTukTours from "./components/TukTukTours";
import BycicleTours from "./components/BicycleTours";
import WalkingTours from "./components/WalkingTours";
const rootElement = document.getElementById("root");
render(
<BrowserRouter>
<Routes>
<Route path="/" element={<App />} />
<Route path='tuktuktours' element={<TukTukTours/>}/>
<Route path='bycicletours' element={<BycicleTours/>}/>
<Route path='walkingtours' element={<WalkingTours/>}/>
</Routes>
</BrowserRouter>,
rootElement
);
The App component is what loads the main page basically, I have a nav bar there which has a select box that changes between two languages. Once the user changes all the text in the page changes from one language to another. I want the same to happen on my three other pages (Routes above).
For that I want to pass down a state variable to App, WalkingTours, BycicleTours and TukTukTours to dynamically change the content of the pages.
The way I have index.js structured it doesn't look like I can use useState hook to achieve what I want. Something similar to the below;
import { render } from "react-dom";
import App from "./App";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import TukTukTours from "./components/TukTukTours";
import BycicleTours from "./components/BicycleTours";
import WalkingTours from "./components/WalkingTours";
import { useState } from "react";
const [language, setLanguage] = useState("GB");
const changeLanguage = (language) => setLang(language);
const rootElement = document.getElementById("root");
render(
<BrowserRouter>
<Routes>
<Route path="/" element={<App language={language} setLang={changeLanguage} />} />
<Route path='tuktuktours' element={<TukTukTours language={language}/>}/>
<Route path='bycicletours' element={<BycicleTours language={language}/>}/>
<Route path='walkingtours' element={<WalkingTours language={language}/>}/>
</Routes>
</BrowserRouter>,
rootElement
);
I know the above is not valid because I can't use hooks outside react function components or custom hook functions.
What would be the best way to achieve what I have above?
Many thanks

Images don't show only when optional html parameter is provided (but do show otherwise)

I have parent component that shows an image at a specified path (note: the image is already saved in my project). This path optionally can have additional parameters. If the
For example, The image is displayed (image) if the html path is:
www.mysite.com/myPath
The component is displayed but image is broken (broken image) if the html path is:
www.mysite.com/myPath/someFilterForThisPage
Router
// Libraries
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { browserHistory } from 'react-router';
// Components
import Home from './containers/Home';
import NotFound from './components/NotFound';
import MyComponent from './components/MyComponent';
// Redux
import { Provider } from 'react-redux';
import {createStore} from 'redux';
import allReducers from './reducers';
const store = createStore(
allReducers,
window.devToolsExtension && window.devToolsExtension()
);
// Routes
const routes = (
<Router history={browserHistory}>
<div>
<Provider store={store}>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/myPath/:filter?" component={MyComponent} />
<Route component={NotFound} />
</Switch>
</Provider>
</div>
</Router>
);
export default routes;
I don't think the issue is with my router.js file since the component still shows when a filter is applied in the html path (the image is just broken, ), but I am providing it just in case I am misunderstanding something.
My Component:
// React
import React from 'react';
class MyComponent extends React.Component {
constructor(props) {
super(props);
}
render() {
<div>
<img src={"img/x.png"} id="someId" alt=""/> // ISSUE
// ...
// some divs that show/don't based on the filter of the html path
// ...
</div>
}
}
export default MyComponent;
I have looked at and tried some of the following, but with little luck:
React won't load local images
Dynamically Add Images React Webpack
I think these are different because these are mainly issues related to being unable to display images at all. I am able to display the image, but only when the optional html parameter is not set.
Does anyone know why the image is showing, but only if there is no extra html parameter?
Many thanks.
Any reason why {"img/x.png"} is not accessing root? Such as {"/img/x.png"} or setup your env domain as a global variable and add that in there otherwise you are looking inside every directory you hit for an img directory.

react-router v4 - browserHistory is undefined

I am creating my first react app in electron (my first electron app too). I have two routes & need to navigate from one to another. For that I am using following code:
Root
ReactDOM.render(
<Router history={browserHistory}>
<App />
</Router>,
document.getElementById('root')
);
App
class App extends React.Component {
constructor() {
super();
}
render() {
return (
<div className="app-master">
<Switch>
<Route path='/city' component={CityList}/>
<Route path='/' component={SplashScreen}/>
</Switch>
</div>
)
}
}
Page
import { browserHistory } from 'react-router';
...
browserHistory.push('/city');
This line gives error,
TypeError: Cannot read property 'push' of undefined
I searched web for possible solution but can't find one! There are many similar questions on SO too, but none of it worked for me :(
You have to import it from the history module now which provides 3 different methods to create different histories.
createBrowserHistory is for use in modern web browsers that support the history API
createMemoryHistory is used as a reference implementation and may also be used in non-DOM environments, like React Native or tests
createHashHistory for legacy web browsers
You cannot use the browser history in an electron environment, use the hash or the memory one.
import { createHashHistory } from 'history'
const history = createHashHistory()
You can then use the history injected in the props
this.props.history.push('/')
Useful pointers above. The simplest solution I've found is to add:
import {createBrowserHistory} from 'history';
to your list of import statements, then add:
const browserHistory = createBrowserHistory();
Might not work perfectly, but for the basic stuff I'm working on seems to do the trick. Hope that helps.
Its is not working for your because in your component you are still using browserHistory which is not longer availabe from react-router package. You should change to using history from the history package
To simplify you can create a history.js file with the following contents
import { createBrowserHistory } from 'history'
export default createBrowserHistory();
Root
import history from '/path/to/history';
ReactDOM.render(
<Router history={history}>
<App />
</Router>,
document.getElementById('root')
);
Page
import history from 'path/to/history';
...
history.push('/city');
import { browserHistory } from 'react-router' does not work in React router 4. Link
Use the redirect component:
import { Redirect } from 'react-router';
<Redirect push to="/somewhere/else"/>
The render function should replace the entire content with Redirect component.
In react-router v4 initialize router as constant config and access the history through this.props in child components.
Import you dependecies
import { Route, Router } from "react-router";
import { createBrowserHistory } from "history";
Define your router config and add history as prop
const history = createBrowserHistory();
const routes = (
<Router history={history}>
<Route path='/city' component={CityList}/>
<Route path='/' component={SplashScreen}/>
</Router> )
class App extends Component {
render() {
return (
<div className = "app-master>
{routes}
</div>)
}
Defining route as a constant and out of render method this would initialize the route config only once.
Page Component
class Page extend Component {
render() {
this.props.history.push('/');
}
}
The history is now available as props in all the child components defined in routes config.

Categories