We Keep Coding

I'm facing this error in client side in React,js

index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.querySelector('#root'));
App.js
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Join from './components/Join';
import Chat from './components/Chat';
const App = () => (
<Routes>
<Route path='/' exact component={Join} />
<Route path='/chat' component={Chat} />
</Routes>
);
export default App;
It thows error like "Error: useRoutes() may be used only in the context of a component."
Here is the ERROR:
"

You have to wrap your app in the BrowserRouter component in order to be able to use routing
So the code in index.js will be as follows
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
ReactDOM.render(<BrowserRouter> <App /> </BrowserRouter>, document.querySelector('#root'));
You could instead wrap the app in App.js
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Join from './components/Join';
import Chat from './components/Chat';
const App = () => (
<BrowserRouter>
<Routes>
<Route path='/' exact component={Join} />
<Route path='/chat' component={Chat} />
</Routes>
</BrowserRouter>
);
export default App;
but for cleaner code, do the first approach

Wrap your code inside <BrowserRouter> making sure it isn’t in the app itself but higher up in the tree.

cannot render a <Router> inside another <Router>. You should never have more than one in your app

This is my index.js code
import React from "react";
import { render } from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { BrowserRouter } from "react-router-dom";
import "#fortawesome/fontawesome-free/css/all.min.css";
import "bootstrap-css-only/css/bootstrap.min.css";
import "mdbreact/dist/css/mdb.css";
import { createStore } from "redux";
import { userReducer } from "../src/reducers/UserReducer";
import { Provider } from "react-redux";
import { loadState, saveState } from "./store/LocalStorage";
const persistedState = loadState();
let store = createStore(userReducer, persistedState);
store.subscribe(() => saveState(store.getState()));
render(
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>,
document.getElementById("root")
);
serviceWorker.unregister();
This is the error I am getting on browser
"Error: You cannot render a <Router> inside another <Router>. You should never have more than one in your app."
Please help me with some solution.

I guess you are using React Router 6. They dropped support for nested Routers(like MemoryRouter inside of BrowserRouter or any other combinations)
https://github.com/remix-run/react-router/issues/7375
There is rather a hack with <UNSAFE_LocationContext.Provider but as name suggests it's not guaranteed this will work for any(even patch version) updates.
I suggest you either going back to V5 or getting rid of nesting.

TypeError: props.history.listen is not a function. I am using ReactJS

Why is this showing? I am using ReacJS and I can not see what is wrong.
My history.js:
import { createBrowserHistory } from 'history'
export default createBrowserHistory
My App.js:
import React from 'react'
import { Router } from 'react-router-dom'
import Routes from './routes'
import history from './history'
import './styles/global.scss'
function App() {
return (
<div className="App">
<Router history={history}>
<Routes/>
</Router>
</div>
);
}
export default App;

You need to invoke createBrowserHistory and then export it. Try changing the line to:
export default createBrowserHistory();

This is the proper way to import Router component,the root router component which takes history as a prop.
import { BrowserRouter as Router } from "react-router-dom";
and as Sajib Khan said, you should also call the createBrowserHistory then use it as history prop.

Why I can not use exported routes in index.js

I receive an error.
React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined
I am trying ti use riutes from import in Index.js
import React from 'react';
import ReactDom from 'react-dom';
import routes from './routes.js';
import { HashRouter as Router, Route, IndexRoute } from 'react-router-dom';
const renderApp = (appRoutes) => {
ReactDom.render(appRoutes, document.getElementById('app'));
};
renderApp( routes() );
I export this routes from routes.js
import React from 'react';
import { AppContainer } from 'react-hot-loader';
import { BrowserRouter as Router, Route, browserHistory, IndexRoute } from 'react-router-dom';
import App from './components/App';
const routes = () => (
<AppContainer>
<Router history={browserHistory} component={App}>
</Router>
</AppContainer>
);
export default routes;

You probably want to call routes:
renderApp( routes() );

Cannot read property 'location' of undefined

I try to use react-router-dom 4.0.0 library. But it send me this error
Uncaught TypeError: Cannot read property 'location' of undefined
It seems that problem in browserHistore. Before I used react-router 2.x.x and everything was alright.
This is my index.js
import 'babel-polyfill'
import React from 'react'
import { Router, hashHistory } from 'react-router-dom'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { configureStore } from './store'
import { routes } from './routes'
const store = configureStore()
render(
<Provider store={store}>
<Router history={hashHistory} routes={routes} />
</Provider>,
document.getElementById('root')
)
This is my routes
import React from 'react'
import { IndexRoute, Route } from 'react-router-dom'
import App from './containers/App'
import Main from './containers/Main'
import First from './containers/First'
export const routes = (
<Route path='/' component={Main}>
<Route path='/path' component={First} />
<IndexRoute component={App} />
</Route>
)
And also for server side express I set this get configuration
app.get('*', function root(req, res) {
res.sendFile(__dirname + '/index.html');
});

React Router v4 is a complete re-write and isn't compatible with previous versions as you're assuming in your code. With that said, you shouldn't expect to be able to just upgrade to a new major version (V4) and have your app work as normal. You should check out the documentation or downgrade back to V2/3. Here's some code that should get you started in the right direction
import 'babel-polyfill'
import React from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { configureStore } from './store'
import App from './containers/App'
import Main from './containers/Main'
import First from './containers/First'
const store = configureStore()
render(
<Provider store={store}>
<Router>
<Route path='/' component={Main} />
<Route path='/path' component={First} />
</Router>
</Provider>,
document.getElementById('root')
)

Check the version of react-router-dom in package.json
If its version is greater than 4 then in your file import BrowserRouter :-
import { BrowserRouter as Router, Route } from 'react-router-dom'
else if its version is less than 4 then import Router :-
import { Router, Route } from 'react-router-dom'

Install npm history package: npm i history
and then use it as follow in your index/routes file:
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Switch, Route} from 'react-router-dom';
import createBrowserHistory from 'history/createBrowserHistory';
import App from './components/App';
import './index.css'
const history = createBrowserHistory();
ReactDOM.render(
<Router history={history}>
<Switch>
<Route path='/' component={App}/>
</Switch>
</Router>,
document.getElementById('root')
);