Error: Invariant failed: You should not use <Route> outside a <Router>

Question

I am doing a login page using react-redux. After the user provides the correct id and password to the app, it should redirect the user to the homepage. The error above shows when I using . If I change to using the no error show but the page not able to redirect the user to the homepage.

index.js

import ReactDOM from 'react-dom';
import 'semantic-ui-css/semantic.min.css';
import {BrowserRouter, Route,Switch,Router }from 'react-router-dom'
import {ConnectedRouter,routerMiddleware, connectRouter } from 'connected-react-router'

import { init } from '@rematch/core'
import logger from 'redux-logger'
import * as models from './models'
import { Provider } from 'react-redux'

import * as serviceWorker from './serviceWorker';
import Dashboard from './component/Dashboard';
import MasterForm from './component/MasterForm';
import LoginForm from './component/LoginForm';
import MobilityForm from './component/MobilityForm';
import CaseRecord from './component/CaseRecord';
import MovementMap from './component/MovementMap';

const middleware = routerMiddleware(history)
const history = require("history").createBrowserHistory()
const store = init({
    redux: {
        middlewares: [
            middleware,
            logger
        ]
    },
    models
})

ReactDOM.render((
    <Provider store={store}>
      <ConnectedRouter history={history}>
        <>
            <Route exact path='/' component={Dashboard} />
            <Route exact path='/dashboard' component={Dashboard}/>
            <Route exact path='/form' component={MasterForm}/>
            <Route path='/mob' component={MobilityForm}/>
            <Route path='/record' component={CaseRecord}/>
            <Route path='/login' component={LoginForm}/>
            <Route path='/map' component={MovementMap}/>
        </>
        </ConnectedRouter>
    </Provider>), document.getElementById('root'));


serviceWorker.register()

effects.js

import { dispatch } from '@rematch/core'
import { push } from 'react-router-redux'

const headers = {
    'Accept': '*/*',
    'Content-Type': 'application/json; charset=utf-8'
}

export const user = {
    login(body, state) {
        console.log(body)
        fetch(`${config.url}/login`, {
            method: 'POST',
            headers,
            body: JSON.stringify(body)
        })
        .then(res => res.json())
        .then(data => {
            let nextState = this.loginDone(data)
            console.log(data)
            dispatch(push('/'))

            return nextState
        })
    }
}

reducers.js

export const user = {
    loginDone: (state, data) => {
        document.cookie = `token=${data.token}`

        return {
            ...state,
            auth_token: data.token
        }
    }
}

models.js

import * as reducers  from './reducers'
import * as effects from './effects'

export const user = {
    state: {},
    reducers: reducers.user,
    effects: effects.user
}

LoginForm.js

import React from 'react'
import { connect } from 'react-redux'

import { Button, Form, Grid, Header, Image, Message, Segment } from 'semantic-ui-react'

class LoginForm extends React.Component{

  state = {
    username: '',
    password: ''
}

  render() {
    const { username, password } = this.state

    return (
        <div className='login-form'>
            <style>{`
                body > div,
                body > div > div,
                body > div > div > div.login-form {
                    height: 100%;
                } 
            `}</style>
            <Grid
                textAlign='center'
                style={{ height: '100%' }}
                verticalAlign='middle'
            >
                <Grid.Column style={{ maxWidth: 450 }}>
                    <Header as='h2' color='teal' textAlign='center'>
                        Log-in to your account
                    </Header>
                    <Form size='large'
                    onSubmit={event => {
                        event.preventDefault()
                        this.props.login(username, password)
                    }}>
                        <Segment stacked>
                            <Form.Input
                                fluid
                                icon='user'
                                iconPosition='left'
                                placeholder='User ID'
                                onChange={event => this.setState({ username: event.target.value })}
                            />
                            <Form.Input
                                fluid
                                icon='lock'
                                iconPosition='left'
                                placeholder='Password'
                                type='password'
                                onChange={event => this.setState({ password: event.target.value })}
                            />

                            <Button color='teal' fluid size='large'>Login</Button>
                        </Segment>
                    </Form>
                </Grid.Column>
            </Grid>
        </div>
    )
}

}
const mapDispatch = dispatch => ({
  login: (username, password) => dispatch.user.login({username, password})
})
export default connect(null,mapDispatch)(LoginForm)

I had tried many solutions found in StackOverflow and also checked the package version.

package.json

{
  "name": "Mozzhub",
  "version": "0.1.0",
  "homepage": "./",
  "dependencies": {
    "@rematch/core": "^1.1.0",
    "axios": "^0.21.0",
    "browserslist": "^4.14.5",
    "caniuse-lite": "^1.0.30001150",
    "chart.js": "^2.8.0",
    "connected-react-router": "^6.9.1",
    "create-react-class": "^15.6.3",
    "history": "^4.10.1",
    "leaflet": "^1.4.0",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-chartjs-2": "^2.7.6",
    "react-dom": "^16.14.0",
    "react-keyboard-time-input": "^2.1.1",
    "react-leaflet": "^2.2.1",
    "react-leaflet-heatmap-layer": "^2.0.0",
    "react-new-window": "^0.1.3",
    "react-redux": "^6.0.1",
    "react-router-dom": "^5.2.0",
    "react-router-redux": "^5.0.0-alpha.9",
    "react-scripts": "2.1.1",
    "react-simple-timefield": "^2.0.3",
    "react-step-builder": "^1.1.14",
    "redux": "^4.0.1",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "semantic-ui-calendar": "0.0.8",
    "semantic-ui-calendar-react": "^0.12.0",
    "semantic-ui-css": "^2.4.1",
    "semantic-ui-react": "^0.83.0",
    "wellknown": "^0.5.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

Answer 1

Finally, I had solved this problem. I make a new js file called store.js to declared the store uses in this application. I add a line of code to indicate the reducers in the init() function as shown below:

store.js

import createHistory from 'history/createBrowserHistory'
import {routerMiddleware, connectRouter } from 'connected-react-router'

import { init } from '@rematch/core'
import logger from 'redux-logger'
import * as models from './models'


export const history = createHistory()
const middleware = routerMiddleware(history)
export const store = init({
    models,
    redux: {
        reducers:{
            router: connectRouter(history)
        },
        middlewares: [middleware,logger]
        }
    })

export const { getState, dispatch } = store

I followed this https://github.com/rematch/rematch/pull/446 to define the dispatch function.