If you are using webpack-dev-server there is an option called history-api-fallback. If set to true 404s will fallback to /index.html. Add the option to devServer section of the Webpack config like this: devServer: { contentBase: ‘app/ui/www’, devtool: ‘eval’, hot: true, inline: true, port: 3000, outputPath: buildPath, historyApiFallback: true, }, Link to Webpack docs: https://webpack.js.org/configuration/dev-server/ webpack-dev-server … Read more
Since the release of React Router v1.0, the run method has been removed, these breaking changes are documented in the upgrade guide. Your code would roughly translate to this: ReactDOM.render(<Router>{routes}</Router>, document.getElementById(‘app’)) https://github.com/rackt/react-router/blob/832c42946c874fe56ffde0066b1088054311cb98/CHANGES.md
To answer your last question, the recommended approach is to use <MemoryRouter>< *your component here* ></MemoryRouter> in your tests. Typescript does not pick up that this component will pass the required props to your component, as such I assume it not to be a type safe approach. This is for React Router v4 and doesn’t … Read more
create .env file in your project file and add the following statement SKIP_PREFLIGHT_CHECK=true Save the file Remove node_modules, yarn.lock, package.lock Then reinstall node_modules with npm install This should work
You can use routes without a path to define containers that are not defined by the url: <Route path=”/” component={Containers.App}> { /* Routes that use layout 1 */ } <Route component={Containers.Layout1}> <IndexRoute component={Containers.Home}/> <Route path=”about” component={Containers.About}/> <Route path=”faq” component={Containers.Faq}/> <Route path=”etc” component={Containers.Etc}/> </Route> <Route component={Containers.Layout2}> { /* Routes that use layout 2 */ } <Route … Read more
You need use the SUIR’s augmentation: <Menu.Item as={ Link } name=”profile” to=’profile’> <Icon name=”user” /> My profile </Menu.Item>
For simple ReactJS sitemap integration with React Router, you should check out the react-router-sitemap package. It’s fairly configurable as well, as you can see in the docs, so if you need to include change frequency or things like that, you should be able to do it no problem. Or were you looking for a way … Read more
This should work: const reload = () => window.location.reload(); <Router> // all your routes.. … // Your special routes.. <Route path=”/sitemap.xml” onEnter={reload} /> <Route path=”/something.html” onEnter={reload} /> </Router> So, I think this should be pretty clear what it does 😉 Update: if this is an option you can simply put target=”_blank” attribute in your <Link> … Read more
As pointed out in the docs Verifies that children has only one child (a React element) and returns it. Otherwise this method throws an error. So now why is it helpful over just using props.children? The main reason is it’s throwing an error, thus halting the whole dev flow, so you cannot skip it. This … Read more
1.0 react-router no longer sets a key on your routes. If you do need to set a key from a route handler, put it on a surrounding element. return ( <div key={this.props.params.bookId}> {this.props.children} </div> ); 0.13 It’s now <ReactRouter.RouteHandler key=”anything” />, but this is also no longer really needed due to changes in react-router. See … Read more