How to include browserHistory using ReactRouter in non-node app? - reactjs

was experimenting with react and was replacing hashHistory with browserHostory. The application is a static application running on apache server and not on node. Have used the libraries for React, Reaact-dom, ReactRouter and created js pages for various routes. The replaced code doesn't seem working and on console got the message Uncaught ReferenceError: browserHistory is not defined . Below is he code for the same ? I want to replace hash history with browserHistory.
<script type="text/javascript">
var destination = document.querySelector("#container");
var { Router, Route, IndexRoute, IndexLink, Link } = ReactRouter;
ReactDOM.render(React.createElement(Router,{ history : browserHistory },React.createElement(
Route,{ path: "/", component: App },
React.createElement(IndexRoute, { component: Home }),
React.createElement(Route, { path: "/stuff", component: Stuff }),
React.createElement(Route, { path: "/contact", component: Contact }),
React.createElement(Route, { path: "/event", component: Event }),
React.createElement(Route, { path: "/search", component: Search }),
React.createElement(Route, { path: "/fetch", component: Fetch }),
React.createElement(Route, { path: "/socket", component: Socket }),
React.createElement(Route, { path: "/form", component: Form })
)
), destination);
</script>
If used node.js then could have imported the browserHistory, but here I am using react-router library in the html page. How to overcome this issue ?


You need to import browserHistory too.
var { Router, Route, IndexRoute, IndexLink, Link, browserHistory } = ReactRouter;

Related

Webpack keeps saying "Imported module is undefined"

So I have this routes.ts file where I've stored all the routes of my React app that I created with create-react-app. The routes get imported whenever I need to insert some route-related data.
tl;dr Webpack has no issue with a module elsewhere but says it's undefined at one spot.
Here's all the information you need to help me out 🙂
routes.ts
import { Route, PageName } from ".";
...
const routes: Record<PageName, Route> = {
landing: {
PATH: "/landing",
BASENAME: "landing",
TITLE: env.app.NAME,
Page: Landing,
},
...
}
Works fine everywhere else but here:
navbar-utils.ts
import { routes } from "../../config";
...
const navItems: NavItem[] = [
{
text: "Home",
icon: faHome,
to: routes.landing.PATH,
},
...
]
There is where Webpack loses it and keeps telling me that _config__WEBPACK_IMPORTED_MODULE_0__.routes is undefined.

Getting functions from import file within a foreach loop

As im new to Reactjs it is hard for me to explain this, but I am trying to define all pages(components, routes and more) on a different page (routes.js) and looping this on the app.js page in order to build all pages/routes. But the imports of the pages are not working because I didn't defined them on the same page.
When I 'am not using the foreach the pages will load.
//app.js
import RC from './constants/Routes';
import {Page1,Page2,Page3} from "./components/pages";// not used here but set in route.js
<Switch>
{Object.keys(RC).forEach(key=>{
<Route path={RC[key].route} component={RC[key].component}/>
})}
</Switch>
//routes.js
export default Object.freeze({
PAGE1: {
route: '/page1',
component: 'Page1'
},
PAGE2: {
route: '/page2',
component: 'Page2'
},
PAGE3: {
route: '/page3',
component: 'Page3'
},
});

How can I using BrowserRouter instead of HashRouter in react-router v4

const routes = [
{ component: Root,
routes: [
{ path: '/',
exact: true,
component: Home
},
{ path: '/child/:id',
component: Child,
routes: [
{ path: '/child/:id/grand-child',
component: GrandChild
}
]
}
]
}
]
routes.config.js export routes object using in renderRoutes method which is exported by react-router-config
when I start the app and access the url localhost:3000 the Home component will be rendered .
If access localhost:3000/child the request is 404.
If access localhost:3000/#/child but it render Home component instead of Child component
In the development mode I know can add devServer:{historyApiFallback:true}, but should I do in the production mode ?
If using HashRouter it works well.
So how can I using the BrowserRouter?

Try this:
Step 1: Wrap your <App /> inside <BrowserRouter />
Step 2: <Router path="/child" component={Child} />
Step 3: Point this router using <Link to="/CHILD>Child</Link>"

How to keep params with react-router v4?

I have a React/Redux Universal application and I have recently added i18next to add internalization to my website.
In my react-router config, I have edited my routes:
const routes = [
{
component: App,
routes: [
{ path: '/:lng(fr|en)?/', exact: true, component: Home },
{ path: '/:lng?/about', component: About },
…
{ component: NotFound }
]
}
];
Everything works well, but I don't know how to keep the lng paramaters between my pages. Indeed, when I use <Link to="/about" >, I logically lost my params.
So, how to keep this parameter?
Thanks

React router - redirect using indexRoute

I'm using react-router with routes parameter:
const rootRoute = {
component: App,
childRoutes: createRoutes(store),
indexRoute: { onEnter: (nextState, replace) => replace('/new-url') }
};
Here is the Router jsx part:
<Router
history={hashHistory}
routes={rootRoute}>
</Router>
The indexRoute is the line I was trying to add to make the redirect but it doesn't work.

You need to add path: '/' to your rootRoute.

Resources