I'm trying to configure the react router dom route structure, but apparently my routes are not being recognized within the application
routes/index.tsx
import React from 'react';
import { inject, observer } from 'mobx-react';
import { Routes, Route, Link } from "react-router-dom";
import {
Main,
} from '../scenes';
import { Routes as RoutesPath } from './routing';
const RoutesContainer: React.FC = () => (
<Routes>
<Route path={RoutesPath.MAIN} element={<Main />} />
</Routes>
);
export { Routes };
export default inject('routing')(observer(RoutesContainer));
index.tsx (aplication)
import React from 'react'
import { Provider } from 'mobx-react';
import { render } from 'react-dom'
import './index.css'
import store from './stores';
import { Routes } from './routes';
import { BrowserRouter } from 'react-router-dom';
render(
<Provider rootStore={store}>
<BrowserRouter>
<React.StrictMode>
<Routes />
</React.StrictMode>
</BrowserRouter>
</Provider>,
document.getElementById('root')
)
If I remove my component, and add some text it displays correctly, but with the component it displays a blank screen.
Related
I'm trying to set up routing but for some reason, it returns a blank page and renders nothing.
I'm using router version 6.3.0
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from "react-router-dom";
import './index.css';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<BrowserRouter><App /></BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);
// --------------------------------------------- //
// App.js
import React, { Component, Fragment } from "react";
import { Route } from "react-router-dom";
import Header from "./components/Landing/Header"
import Landing from "./components/Landing/Landing";
import Footer from "./components/Landing/Footer";
class App extends Component {
render() {
return (
<Fragment>
<Header />
<Route path="/landing">
<Landing />
</Route>
<Footer />
</Fragment>
);
}
}
export default App;
// --------------------------------------------- //
// Landing.js
import Body from './Body'
function Landing(props) {
return (
<Body>
<div className="Landing">
Landing Context
</div>
</Body>
)
}
export default Landing;
So when I visit http://localhost:3000/landing nothing is rendered, and when I try http://localhost:3000 nothing is rendered either.
If I remove the <Route></Route> part in App.js, it renders, but on any URL. What do I miss?
As the OP is using react-router-dom v6
Instead of children, it is expecting element props to render the component.
https://reactrouter.com/docs/en/v6/getting-started/overview#configuring-routes
In app.js wrap your route in router like this
import React, { Component, Fragment } from "react";
import { Router, Route } from "react-router-dom";
import Header from "./components/Landing/Header"
import Landing from "./components/Landing/Landing";
import Footer from "./components/Landing/Footer";
class App extends Component {
render() {
return (
<Fragment>
<Header />
<Router>
<Route path="/landing">
<Landing />
</Route>
</Router>
<Footer />
</Fragment>
);
}
}
export default App;
react-router v6 has some breaking changes, it replaced Switch with Routes component:
/ index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from "react-router-dom";
import './index.css';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<BrowserRouter><App /></BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);
// --------------------------------------------- //
// App.js
import React, { Component, Fragment } from "react";
import { Routes, Route } from "react-router-dom";
import Header from "./components/Landing/Header"
import Landing from "./components/Landing/Landing";
import Footer from "./components/Landing/Footer";
class App extends Component {
render() {
return (
<Fragment>
<Header />
<Routes>
<Route path="/landing" element={<Landing />}/>
</Routes>
<Footer />
</Fragment>
);
}
}
export default App;
https://reactrouter.com/docs/en/v6/getting-started/overview
If your are using react-router version < 6 then you have to add Switch element imported from react-router-dom above your Route Element -
// App.js
import React, { Component, Fragment } from "react";
import { Route, Switch } from "react-router-dom";
class App extends Component {
render() {
return (
<Fragment>
<Switch>
<Route path="/landing">
<div>On LAnding Page</div>
</Route>
</Switch>
</Fragment>
);
}
}
export default App;
And if you are using react-router > 6 then you have to replace Switch with Routes and place your component you want to render inside element property of Route . The code should be similar to following -
// App.js
import React, { Component, Fragment } from "react";
import { Route, Routes } from "react-router-dom";
class App extends Component {
render() {
return (
<Fragment>
<Routes>
<Route path="/landing"
element={<div>On Landing Page</div>}>
</Route>
</Routes>
</Fragment>
);
}
}
export default App;
I'm trying to separate routes into their own file, but they seem to be always rendered, even if I've added exact to the path.
Home route - home.js:
import React from 'react';
import { BrowserRouter as Route } from 'react-router-dom';
import { HomePageView } from 'components'
const HomeRoute = () => (
<Route exact path='/home'>
<HomePageContainer />
</Route>
)
export default HomeRoute;
HomePageView.js:
import React from 'react';
class HomePageView extends React.Component {
render() {
return (
<div>Some text here</div>
)
}
}
export default HomePageView;
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import HomeRoute from 'routes/home'
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<Router>
<HomeRoute />
</Router>,
document.getElementById('root')
);
The problem is that it renders the HomePageView component on any path and I don't understand why this happens because it works as expected if I replace <HomeRoute /> from index.js with:
<Route exact path='/home'>
<HomePageContainer />
</Route>
I haven't tested this myself, but isn't the problem that you are importing BrowserRouter as Route in your home.js?
The file would looks like this when rendered:
<BrowserRouter>
<BrowserRouter>
<HomePageContainer/>
<BrowserRouter/>
<BrowserRouter/>
You need to import route from react-router-rom like this import { Route } from "react-router-dom";
"as" in import is an alias, not what is imported.
Fixed home.js file:
import React from 'react';
import { Route } from "react-router-dom";
import { HomePageView } from 'components'
const HomeRoute = () => (
<Route exact path='/home'>
<HomePageContainer />
</Route>
)
export default HomeRoute;
I'm doing very simple programme on react router..but I don't know what's going wrong with this...here is my react router code..
index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Router, browserHistory} from 'react-router';
import routes from './routes';
ReactDOM.render(
<Router history={browserHistory} routes={routes} />
, document.querySelector('.container'));
and here is the routes file ..
routes.js
import React, { Component } from 'react';
import { Route, IndexRouter } from 'react-router';
import App from './components/app';
export default(
<Route path="/" component={App} />
);
it shows error something like this...
You need to use react-router-dom instead of react-router. I've created basic code sandbox for the same You can check code here. https://codesandbox.io/embed/m779xxx4zy.
App.js
import React from "react";
const App = props => {
return <div>HI</div>;
};
export default App;
Routes.js
import React from "react";
import { Route, Switch } from "react-router-dom";
import App from "./app";
const Routes = props => {
return (
<div>
<Switch>
<Route exact path="/" component={App} />
</Switch>
</div>
);
};
export default Routes;
index.js
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import Routes from "./routes";
ReactDOM.render(
<BrowserRouter>
<Routes />
</BrowserRouter>,
document.querySelector(".container")
);
I have plugged react router 4 into my react-create-app and upon running npm run test I get the following error:
Warning: Failed context type: The context `router` is marked as required in `Switch`, but its value is `undefined`.
in Switch (at App.js:17)
in main (at App.js:16)
in div (at App.js:15)
in App (at App.test.js:7)
I am using react-router#4.2.0, and react-router-dom#4.2.2
I have ensured my <Switch> component is nested within <BrowserRouter>.
App.js:
import React, { Component } from 'react';
import { Switch, Route, withRouter, Router } from 'react-router-dom';
import './App.css';
// Components
import Header from '../../components/header/Header';
import Nav from '../../components/nav/Nav';
import Dashboard from './../../containers/dashboard/Dashboard';
import Events from './../../containers/events/Events';
import NotFound from './../../containers/notfound/NotFound';
class App extends Component {
render() {
return (
<div className="App">
<Header />
<Nav />
<main id="main">
<Switch context="router">
<Route path="/" exact component={Dashboard} />
<Route path="/events" exact component={Events} />
<Route path="*" component={NotFound} />
</Switch>
</main>
</div>
);
}
}
export default App;
and my index.js
import ReactDOM from 'react-dom';
import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import Store from './store';
import App from './containers/app/App';
import './index.css';
const StoreInstance = Store();
ReactDOM.render(
<Provider store={StoreInstance}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>,
document.getElementById('root')
);
Anybody else come across this?
It is default test example of Create React App.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
});
Router context is provided in the 'index.js' file and doesn't exist when you run the test.
You should rewrite it next way:
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import App from './App';
it('renders without crashing', () => {
const div = document.createElement('div');
const StoreInstance = Store();
ReactDOM.render(
<Provider store={StoreInstance}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>,
div
);
});
or move 'Provider' and 'BrowserRouter into 'App' component.
I have a very simple project and react router dom is not rendering components. Sometimes it renders the component for first route but then it doesn't render.
Here's the code for App.js:
import React, { Component } from 'react';
import { Provider } from "react-redux";
import {
BrowserRouter as Router,
Route
} from "react-router-dom";
import store from "./store";
import createHistory from 'history/createBrowserHistory';
import { IntroJm } from './components/intro/jm';
import { IntroNfc } from './components/intro/nfc';
import { IntroTxn } from './components/intro/txn';
import './assets/sass/main.scss';
import './static/css/main.scss';
import './static/css/pure.min.scss';
import './App.scss';
let browserHistory = createHistory();
class App extends Component {
componentDidMount() {
browserHistory.push("/intro/jm");
}
render() {
return (
<Provider store={store}>
<div>
<Router>
<div>
<Route path="/intro/jm" component={IntroJm} />
<Route path="/intro/nfc" component={IntroNfc} />
<Route path="/intro/txn" component={IntroTxn} />
</div>
</Router>
</div>
</Provider>
);
}
}
export default App;
All the route components are simple component with a span tag only.
Please help
You can try wrapping your component with WithRouter and then changing the route with this.props.history.push()
Try
import React, { Component } from 'react';
import { Provider } from "react-redux";
import {
BrowserRouter as Router,
Route
} from "react-router-dom";
import {withRouter} 'react-router';
import store from "./store";
import { IntroJm } from './components/intro/jm';
import { IntroNfc } from './components/intro/nfc';
import { IntroTxn } from './components/intro/txn';
import './assets/sass/main.scss';
import './static/css/main.scss';
import './static/css/pure.min.scss';
import './App.scss';
let browserHistory = createHistory();
class App extends Component {
componentDidMount() {
this.props.history.push("/intro/jm");
}
render() {
return (
<Provider store={store}>
<div>
<Router>
<div>
<Route path="/intro/jm" component={IntroJm} />
<Route path="/intro/nfc" component={IntroNfc} />
<Route path="/intro/txn" component={IntroTxn} />
</div>
</Router>
</div>
</Provider>
);
}
}
export default withRouter(App);