Develop Reference

About build errors on the Next.js project

I am using Next.js, React18, TypeScript.
When I ran build, I got an error.
"Build error occurred"
"Error: Export encountered errors on following paths:"
/CallCenter/Admin
The cause of the error I believe is that I am contiguring routing under the pages folder.
I am using the materialUI ListItem～ListButton to prepare The side menu is prepared and routing is applied to it.
We use "outlets" of React-router-dom for the menu component to create a common layout.
Is it not possible to set routing under pages?
Please let me know your solution.
Thank you.
This is the folder structure.
src
-components
-Menu
-Atoms
-Layout
CallCenter.tsx
Admin.tsx
-pages
-Callcenter
-Admin
index.tsx(AdminRoot)
index.tsx(CallCenterRoot)
-router
CallCenterRouter.tsx
AdminRouter.tsx
This is components/Menu/CallCenter.tsx CODE
export default function MenuCallCenter () {
return (
<RouterCallCenter> // router setting
<MenuLayout.Menu MenuArr={newMenuArry}/>
</RouterCallCenter>
);
}
This is components/Menu/Admin.tsx CODE
export default function MenuAdmin() {
return (
<MenuLayout.Menu MenuArr={MenuEmployeeArr}/>
);
};
This is pages/Callcenter/Admin/index.tsx CODE
export const Home = () => {
return (
<div>
aaa
</div>
)
};
export default Home;
This is pages/Callcenter/index.tsx CODE
import { RouterAdmin } from '../../../router/Admin';
export const HomeAdmin = () => {
return (
<RouterAdmin/>
)
};
export default HomeAdmin;
This is router/CallCenterRouter.tsx CODE
export const RouterCallCenter = (props) => {
const {children} = props;
const router = useRouter();
const fromInfoFlg = router.query.fromInfoFlg;
return (
<BrowserRouter>
<Styledpage>
<Routes>
<Route path='/CallCenter' element={<MenuCallCenter/>}>
<Route path = '/CallCenter' element={fromInfoFlg == '1' ? <Navigate to= '/CallCenter/TodoList' replace/> : <Info/>}/>
<Route path = "/CallCenter/TodoList" element={<TodoList />}/>
</Route>
</Routes>
{ children }
</Styledpage>
</BrowserRouter>
);
};
This is router/AdminRouter.tsx CODE
export const RouterAdmin = (props) => {
const {children} = props;
return (
<BrowserRouter>
<Styledpage>
<Routes>
<Route path='/CallCenter/Admin' element={<MenuAdmin/>}>
<Route path = "/CallCenter/Admin/Order" element={<AdminOrder />}/>
<Route path = "/CallCenter/Admin/History" element={<AdminOrderHistory />}/>
</Route>
</Routes>
{ children }
</Styledpage>
</BrowserRouter>
);
};

React Router - Cannot read property 'history' of undefined

I am building a styleguide app. I have two dropdown components where a user can choose both a brand and a component - the app will then display the chosen component branded according to the selected brand. I want both of these options to be included in the URL.
The two dropdown's that are programatically changing the route. I am getting the error TypeError: Cannot read property 'history' of undefined whenever the user interacts with either dropdown.
I have a component being rendered by a route :
<Route path="/:brand/:component"
render={props => <DisplayComponent {...props} />} />
That component has two event handlers for two dropdown component that let the user select the root:
handleComponentPick(event: any) {
const component = event.target.value;
this.props.history.push(`/${this.props.match.params.brand}/${component}`);
}
handleBrandChange = (event: any) => {
if (event.target instanceof HTMLElement) {
const brand = event.target.value;
this.props.history.push(`/${brand}/${this.props.match.params.component}`);
}
};
render = () => {
return (
<div className={"constrain-width-wide center "}>
<ThemePicker
component={this.props.match.params.component}
brand={this.props.match.params.brand}
handleBrandChange={this.handleBrandChange}
handleComponentPick={this.handleComponentPick}
/>
<div className="currently-selected-component" />
<Route path="/:brand/button" component={Button} />
<Route path="/:brand/card" component={Card} />
</div>
);
};
}
I am wrapping the whole app in the Router.
ReactDOM.render(
<Router>
<App />
</Router>,
document.getElementById("root")
);```

If you are getting this error inside a test using jest, you need to wrap your componen within a router. I am using react-testing-library, so my logic looks as follows:
import { render, cleanup } from '#testing-library/react'
import { BrowserRouter as Router } from 'react-router-dom'
import YourComponent from '../path/to/YourComponent'
// ...
describe('YourComponent component', () => {
afterEach(cleanup)
it('matches snapshot', () => {
const { asFragment } = render(
// The following will solve this issue
<Router>
<YourComponent />
</Router>
)
expect(asFragment()).toMatchSnapshot()
})
})

Can you try these following changes
handleComponentPick(event: any) { to handleComponentPick = (event: any) => {
then
render = () => { to render() {
Hope this works.

you have to pass the history like
<Router history={browserHistory} routes={routes} />,
that way, you can use history with props to navigate.
font: https://github.com/ReactTraining/react-router/blob/v3/docs/guides/Histories.md
try to use browserHistory on you app.js, like
render(
<Router history={browserHistory}>
<Route path='/' component={App}>
<IndexRoute component={Home} />
<Route path='about' component={About} />
<Route path='features' component={Features} />
</Route>
</Router>,
document.getElementById('app')
)
that way, you are passing history for all of your another router.

We need to pass history as a prop to Router. I am expecting that you are using react router v4 aka react-router-dom.
import { createBrowserHistory } from "history";
import { Router } from "react-router-dom";
const history = createBrowserHistory();
...
<Router history={history}>
<Routes />
</Router>
Demo : https://codesandbox.io/s/yv5y905ojv

Spied on the useHistory() hook and provided the mock route data.
import routeData from 'react-router';
describe('<Component /> container tests', () => {
beforeEach(() => {
const mockHistory = {
pathname: '/dashboard'
};
jest.spyOn(routeData, 'useHistory').mockReturnValue(mockHistory);
});

dynamic basename with BrowserRouter in react-router-dom

Please I have an issue building a multi-tenant SaaS solution. For every tenant, I want them to use a subdomain, so i can get the subdomain from the url, make a call to a REST api that returns data about that tenant.
For example,
the admin (another app entirely - admin app) creates a tenant with domain name: tenant1.
In the tenant application on my local system, I was able to go to tenant1.localhost:3000. I get the url, and get the domain name. I then make a call with the domain to get the theme of tenant (this is stored in localStorage).
Unfortunately, we deploy on k8 in my company and so I couldn't mimic this behavior. So i have been advised by the devOps team to use subdomain in the context, thereby having localhost:3000/tenant1. Remember the tenant is dynamic, so i tried this:
<BrowserRouter basename={"/:tenant"}>
<Switch>
<Route exact path="/login" name="Login" component={Login} />
<Route exact path="/set-password/:token" name="Set Password" component={SetPassword} />
<PrivateRoute path="/" name="Default Layout" component={DefaultLayout} />
</Switch>
</BrowserRouter>
The solution above however makes my url to localhost:3000/:tenant/login
Please how can i use dynamic basename in the router, so it can accept:
localhost:3000/tenant1
localhost:3000/tenant3
localhost:3000/tenant2 etc.
It can allow any, my app handles wrong domain inputted

I finally used dynamic tenant with the following code
class App extends Component {
state = {
domain: ""
}
componentWillMount () {
const { domain } = this.state;
const parsedData = window.location.pathname.split("/");
let domain = parsedData[1];
this.setState({ domain: domain })
this.props.onGetTenant(domain);
}
render () {
const { domain } = this.state;
return () {
<BrowserRouter basename={"/"+domain}>
<Switch>
<Route exact path="/login" name="Login" component={Login} />
<Route exact path="/set-password/:token" name="Set Password" component={SetPassword} />
<PrivateRoute domain={domain} path="/" name="Default Layout" component={DefaultLayout} />
</Switch>
</BrowserRouter>
}
const mapStateToProps = state => {
const { tenant} = state;
return { tenant};
};
const mapDispatchToProps = (dispatch) => {
return {
onGetTenant: bindActionCreators( tenantActions.get, dispatch)
}
};
export default connect(mapStateToProps, mapDispatchToProps)(App)

This worked for me using react >16 and react-router-dom v5
export const App = () => {
return (
<BrowserRouter>
<Switch>
<Route path="/:tenantId?" component={LayoutRoot} />
</Switch>
</BrowserRouter>
);
};
export const LayoutRoot = () => {
var { tenantId } = useParams();
//TODO: add some validation here and inform user if tenant is invalid
return (
<BrowserRouter basename={tenantId}>
<Switch>
<Route path="/login" component={LoginComponent} />
<Route path="/dashboard" component={DashboardComponent} />
</Switch>
</BrowserRouter>
);
};

You can render updates to your router's basename by using the key property. Any changes to the key value will cause the component to re-render.
Here's a code sandbox to demo:
https://codesandbox.io/s/react-router-dom-dynamic-basename-forked-hnkk0?file=/index.js
You can hover or inspect the links in the sandbox to verify that their href values are correctly updating after changing the basename. You can also see that the hrefs won't update if you remove the key property from Router.
import React, { useState } from "react";
import { render } from "react-dom";
import { BrowserRouter, Link } from "react-router-dom";
const Root = () => {
const [count, setCount] = useState(1);
const basename = `basename-${count}`;
return (
<BrowserRouter basename={basename} key={basename}>
<Link to="/link1">Link 1</Link>
<br />
<Link to="/link2">Link 2</Link>
<br />
Current basename: {basename}
<br />
<button onClick={() => setCount(count + 1)}>change basename</button>
</BrowserRouter>
);
};
render(<Root />, document.getElementById("root"));

Here's a codesandbox and the utility I wrote:
https://codesandbox.io/s/react-router-dom-dynamic-basename-xq9tj?file=/index.js
import urlJoin from 'url-join';
// it's important to have an identifier in their app
export const APP_ROOT_URL = '/my-app';
export const getBaseUrlPath = () => {
const currentPath = document.location.pathname || APP_ROOT_URL;
const startOfAppBase = currentPath.indexOf(APP_ROOT_URL);
let base = currentPath;
if (startOfAppBase !== -1) {
base = currentPath.substr(0, startOfAppBase);
}
base = urlJoin(base, APP_ROOT_URL);
return base;
};

React router, redux, electron: router isn't rendering

I'm trying to get react-router to work in an electron app. I'm using a boilerplate and stripped away some of the stuff I don't want but that should provide a pretty solid summary of the technologies being used.
I cannot for the life of my get the router to work as expected. To me this means that when I use history.push('/someroute/') or <Link to="someroute"..., the corresponding component to that router should be rendered and the previous one gone.
Here is my routes file:
export default () => (
<App>
<Switch>
<Route path="/" component={MyDevkitsPage} />
<Route path="/browser/" component={DevkitBrowserPage} />
<Route path="/Console/" component={ConsolePage} />
<Route path="/Controller/:devkitIp" component={ControllerPage} />
<Route path="/Setting/:devkitIp" component={SettingPage} />
</Switch>
</App>
);
I would expect that if <Link to="/browser/"> aaaa </Link> is clicked, it would go to the /browser/ component. Instead, I get an error:
Warning: Hash history cannot PUSH the same path; a new entry will not be added to the history stack
Likewise, if I move the path="/browser/" line above the path="/" line in routes, it will always go to /browser/.
edit: RootContainer
export default function Root({ store, history }: RootType) {
return (
<Provider store={store}>
<ConnectedRouter history={history}>
<Routes />
</ConnectedRouter>
</Provider>
);
}
Edit 2: Configure store
const configureStore = (initialState?: counterStateType) => {
// Redux Configuration
const middleware = [];
const enhancers = [];
// Thunk Middleware
middleware.push(thunk);
// Logging Middleware
const logger = createLogger({
level: 'info',
collapsed: true
});
middleware.push(logger);
// Router Middleware
const router = routerMiddleware(history);
middleware.push(router);
// Redux DevTools Configuration
const actionCreators = {
...counterActions,
...routerActions,
};
// If Redux DevTools Extension is installed use it, otherwise use Redux compose
/* eslint-disable no-underscore-dangle */
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
// Options: http://zalmoxisus.github.io/redux-devtools-extension/API/Arguments.html
actionCreators,
})
: compose;
/* eslint-enable no-underscore-dangle */
// Apply Middleware & Compose Enhancers
enhancers.push(applyMiddleware(...middleware));
const enhancer = composeEnhancers(...enhancers);
// Create Store
const store = createStore(rootReducer, initialState, enhancer);
if (module.hot) {
module.hot.accept('../reducers', () =>
store.replaceReducer(require('../reducers')) // eslint-disable-line global-require
);
}
return store;
};

You will need to change <Route path="/" component={MyDevkitsPage} /> to <Route exact path="/" component={MyDevkitsPage} />.
By adding exact to that <Route /> you will prevent react-router from trying to load both <MyDevkitsPage /> and <DevkitBrowserPage /> at the same time.

I had the same issue. One thing that I notice is that if I place the route path after all the others, it will not throw the exception.
My Code:
export default () => (
<App>
<Switch>
<Route path="/counter" component={CounterPage} />
<Route path="/calculator" component={Calculator} />
<Route path="/" component={HomePage} />
</Switch>
</App>
);

This code worked for me I've changed BrowseRouter to MemoryRouter
import React from 'react'
import { MemoryRouter as Router, Routes, Route } from 'react-router-dom';
import './App.css';
import routes from './Route';
function App() {
return (
<>
<Router>
<Routes>
{routes.map((route) => {
return <Route path={route.path} element={route.element} />
})}
</Routes>
</Router>
</>
);
}
export default App;

Dynamically import language json file for react / react-intl

This is the way I configure my client to render the proper language through react-intl.
import localeData from './translations/en.json';
//import localeData from './translations/xx.json'; <-- any language
const render = routes => {
match({ history, routes }, (error, redirectLocation, renderProps) => {
ReactDOM.render(
<HotEnabler>
<IntlProvider locale={locale} messages={localeData}>
<Provider store={store} app={app} restApp={restApp} key="provider">
<Router {...renderProps} render={renderRouter} history={history}>
{routes}
</Router>
</Provider>
</IntlProvider>
</HotEnabler>,
dest
);
});
};
render(getRoutes(store));
However I would like to import the localeData dynamically based on the locale within a cookie. So if the locale of my user is "en", I will only load in the en.json file.
const locale = Cookie.get('locale') || 'en';
const render = routes => {
match({ history, routes }, (error, redirectLocation, renderProps) => {
ReactDOM.render(
<HotEnabler>
<IntlProvider locale={locale} messages={localeData}>
<Provider store={store} app={app} restApp={restApp} key="provider">
<Router {...renderProps} render={renderRouter} history={history}>
{routes}
</Router>
</Provider>
</IntlProvider>
</HotEnabler>,
dest
);
});
};
render(getRoutes(store));
What would be the proper way of doing this? Tried creating a function but I can't pass the data properly to messages.
Thanks

Got it solved through the following codes. Post them here in case someone needs it.
const languages = {
en: require('./translations/en.json'),
zn: require('./translations/zn.json')
};
const localeData = languages[locale];