I am trying to display a react-component .I added some routing mechanism .but it not display my component.
here is my code
https://codesandbox.io/s/WnJl4DKOJ
import React from 'react';
import {Route} from 'react-router-dom';
import Hello from '../Hello';
const Routers = ()=> (
<Route exact path="/" component={Hello}></Route>
)
export default Routers;
Index.js
import React from 'react';
import { render } from 'react-dom';
import {Router } from 'react-router-dom';
import createHistory from 'history/createBrowserHistory';
import Routers from './router/router';
const history = createHistory();
render(
<Router routes={Routers} history={history}></Router>
, document.getElementById('root'));
You're not using the <Router /> properly. Make your <Routers /> a child of <Router />.
In your example, change <Router routes={Routers} history={history}></Router> to:
<Router history={history}>
<Routers />
</Router>
<Router/> provides the required context for the routes.
You need to modify your code as
import React from 'react';
import {Route} from 'react-router-dom';
import Hello from '../Hello';
const Routers = ()=> (
<Router>
<Route exact path="/" component={Hello}/>
</Router>
)
export default Routers;
index.js
import React from 'react';
import { render } from 'react-dom';
import {Router } from 'react-router-dom';
import createHistory from 'history/createBrowserHistory';
import Routers from './router/router';
const history = createHistory();
render(<Routers history={history}/>, document.getElementById('root'));
Related
I am trying to learn react, but I am stuck with react render dom which doesn't want to render my page.
My App.js
import React from 'react';
import { Route } from 'react-router-dom';
import './App.css';
import HomePage from './pages/homepage/homepage.component.jsx';
function App() {
return (
<div>
<Route exact path='/' component={ HomePage }/>
</div>
);
}
export default App;
And my index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
React Router v6 doesn't support exact anymore because all paths are match exactly by default. And component changes to element in v6. You need also to import Routes from react-router-dom.
Finaly, HomePage must be <HomePage/>
import React from 'react';
import { Route, Routes } from 'react-router-dom';
import './App.css';
import HomePage from './pages/homepage/homepage.component.jsx';
function App() {
return (
<Routes>
<Route path='/' element={ <HomePage/> }/>
</Routes>
);
}
export default App;
I created my application with create react app and the routes were working just fine up until a certain point the routes in my navbar I have as links would not load.
Been trying to debug for a while and was wondering if I could get some help as I feel like issue is coming from this specific file
import React from 'react'
import {fetchThreadds} from '../actions/fetchThreadds'
import Threaddform from '../components/Threaddform'
import Threaddlist from '../components/Threaddlist'
import Threaddshow from '../components/Threaddshow'
import {connect} from 'react-redux';
import {Route, Switch} from 'react-router-dom'
import { withRouter } from 'react-router-dom'
class ThreaddsContainer extends React.Component {
componentDidMount(){
this.props.fetchThreadds()
console.log("component did mount console", this.props)
}
render(){
console.log("render")
return(
<div>
<Switch>
<Route exact path='/thread/new' component={Threaddform}/>
{/* <Threaddform/><br></br> */}
<Route path='/threads/:id' render={(routerProps) => <Threaddshow {...routerProps} threadds={this.props.threadds}/>}/>
<Route exact path='/threads'render={()=> <Threaddlist threadds={this.props.threadds}/>} />
{/* <Threaddlist threadds={this.props.threadds}/> */}
</Switch>
</div>
)
}
}
const mapStateToProps = state => {
console.log("getting stuff from the store")
return {
threadds: state.threadds
}
}
export default withRouter(connect(mapStateToProps, {fetchThreadds}(ThreaddsContainer));
Will show all the necessary files below :
import React from 'react';
import './App.css';
import {connect} from 'react-redux';
import ThreaddsContainer from './containers/ThreaddsContainer';
class App extends React.Component {
render(){
return (
<div className="App">
<br></br> <h1 >The Sport Thread </h1>
<ThreaddsContainer/>
</div>
);
}
}
export default connect() (App);
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {createStore, applyMiddleware, compose} from 'redux';
import thunk from 'redux-thunk';
import {Provider} from 'react-redux'
import threaddReducer from './reducers/threaddReducer'
import {BrowserRouter as Router, Route} from 'react-router-dom'
import Home from './components/Home'
import About from './components/About'
import Navbar from './components/Navbar'
import Sportupdate from './components/Sportupdate'
import Help from './components/Help'
import Login from './components/Login'
import Signup from './components/Signup'
import 'bootstrap/dist/css/bootstrap.min.css';
// import * as serviceWorker from './serviceWorker';
//The store
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
let store = createStore(threaddReducer, composeEnhancers(applyMiddleware(thunk)))
ReactDOM.render(
<Provider store={store}>
<Router>
<div>
<center><Navbar /></center>
<App />
<Route exact path="/" component={Home} />
<Route exact path="/about" component={About} />
<Route exact path="/updates" component={Sportupdate} />
<Route exact path="/help" component={Help} />
<Route exact path="/login" component={Login} />
<Route exact path="/signup" component={Signup} />
</div>
</Router>
</Provider>
,
document.getElementById('root')
);
and I am currently on react router v5!
Do let me know if I need to add more information
Use connected-react-router like below.
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App/App";
import { Provider } from "react-redux";
import * as serviceWorker from "./serviceWorker";
import { ConnectedRouter } from "connected-react-router";
import * as initFastClick from "react-fastclick";
import { HelmetProvider } from "react-helmet-async";
import { configureStore, history, injectGlobalSaga } from "./utils";
import LocaleProvider from "./_components/LocaleProvider/Loadable";
import AuthProvider from "./_components/AuthProvider/Loadable";
import { locales } from "./locale";
import "bootstrap/dist/css/bootstrap.min.css";
import "./custom.scss";
import * as GLOBAL_CONSTANTS from "./utils/constants";
initFastClick();
const initialState = {};
const store = configureStore(initialState, history);
injectGlobalSaga(store);
const render = () => {
ReactDOM.render(
<Provider store={store}>
<LocaleProvider messages={locales}>
<ConnectedRouter history={history}>
<HelmetProvider>
<AuthProvider>
<App />
</AuthProvider>
</HelmetProvider>
</ConnectedRouter>
</LocaleProvider>
</Provider>,
document.getElementById("root")
);
};
// Hot reloadable translation json files
if (module.hot) {
// modules.hot.accept does not accept dynamic dependencies,
// have to be constants at compile-time
}
render();
serviceWorker.unregister();
// this is my index.js
import React, { } from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import store from "./store/configureStore";
import { Router } from "react-router";
import "./index.css";
import App from "./App";
import history from "./history";
// append app to dom
ReactDOM.render(
<Provider store={store}>
<Router history={history}>
<App />
</Router>
</Provider>,
document.getElementById("root")
);
//this is my app.js
import React, { Component } from 'react';
import { Route, Switch, BrowserRouter } from 'react-router-dom';
import Inscription from "../src/pages/inscription";
class App extends Component {
render() {
return (
< BrowserRouter>
<Route exact path="/" component={Inscription} />
</ BrowserRouter>
);
}
}
export default (App);
I am having changing the view in react with routing. It seems I have tried everything I can google with no luck. the page affiche but doesn't load
Please same one can help mee :(
Try removing the BrowserRouter from the App component. You have already provided a Router in index.js. Also in case you want to define multiple routes, you have to use switch
<Switch>
<Route exact path="/" component={Inscription} />
<Route exact path="/hello" component={HelloComponent} />
<Switch>
In my application, I am trying to provide store to Router as shown in below code. but It seems like not working as per expectation. Can anyone suggest me the correct way to do it? I have provided my code below.
index.js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import store from "./store";
import { Provider } from 'react-redux'
ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById("root"));
App.js
import React, { Component } from "react";
import "./App.css";
import SectionIndicator from "./components/SectionIndicator/SectionIndicator";
import Section from "./components/Section/Section";
import { BrowserRouter as Router, Route, Switch, browserHistory } from "react-router-dom";
import Section2 from "./components/Section/Section2"; import CheckUpButton from "./components/CheckUpButton/CheckUpButton";
import AppContent from "./AppContent";
import createHistory from "history/createBrowserHistory";
class App extends Component {
render() {
const history = createHistory({ basename: '/' });
return (
<Router history={history} >
<div>
<Switch>
<Route path="/" exact component={CheckUpButton} />
<Route path="/assess" exact component={AppContent} />
<Route path="/section2" component={Section2} />
</Switch>
</div>
</Router>
)
}
}
export default App;
error ::
You should call your App component inside your ReactDOM.Render:
ReactDOM.render(<App />, document.getElementById('root'));
Then, wrap your app with the provider component and call your router inside :
<Provider store={store}>
<Router history={history}>
<Routes />
<Router />
<Provider />
Don't forget to pass history to Router component.
Try it this way :)
I am new to reactjs and working to learn redux with react router. I want to have routes as separate file. However somehow its not working because I am not able to pass the dependencies. Following is code details.
Working index.js having routes as well:
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from 'react-redux';
import {ReduxRouter} from "redux-react-router";
import {Route} from "react-router"
import createBrowserHistory from "history/lib/createBrowserHistory"
import configureStore from './store';
import App from "./containers/App";
import Home from "./components/Home";
import Countries from "./components/Countries";
import {fetchData} from './actions/actions';
const history = new createBrowserHistory();
const store = configureStore();
function loadData() {
store.dispatch(fetchData('https://restcountries.eu/rest/v1/all'))
}
ReactDOM.render(
<Provider store={store}>
<ReduxRouter>
<Route history={history}>
<Route component={App}>
<Route path='/' component={Home} />
<Route path='/countries' component={Countries} onEnter={loadData} />
</Route>
</Route>
</ReduxRouter>
</Provider>,
document.getElementById('root')
);
Following is the code which I tried to split as separate routes.js
index.js
import 'babel-core/polyfill';
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from 'react-redux';
import {ReduxRouter} from "redux-react-router";
import {Route} from "react-router"
import createBrowserHistory from "history/lib/createBrowserHistory"
import configureStore from './store';
import routes from "./routes";
import {fetchData} from './actions/actions';
const history = new createBrowserHistory();
const store = configureStore();
ReactDOM.render(
<Provider store={store}>
<ReduxRouter>
<Route history={history} routes={routes}>
</Route>
</ReduxRouter>
</Provider>,
document.getElementById('root')
);
routes.js
import React from "react";
import { Provider } from 'react-redux';
import {ReduxRouter} from "redux-react-router";
import {Route} from "react-router"
import App from "./../containers/App";
import Home from "./../components/Home";
import Countries from "./../components/Countries";
const router =
<Route history={history}>
<Route component={App}>
<Route path='/' component={Home} />
<Route path='/countries' component={Countries} onEnter={loadData} />
</Route>
</Route>;
export default router;
However it is throwing error as not able to identify loadData function.
Please help.
Pass it as a child, note the parent is called Router:
<Router history={history}>
{routes}
</Router>
Also Route doesn't take the history prop, Router does.
See an example of Router.js and Route.js on a starter of mine: https://github.com/DominicTobias/universal-react/tree/master/app
After following the answer given by Dominic I changed my code as below to pass the dependency as function argument as I don't want to create the store object again. Now its working fine. Following is modified code.
index.js
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from 'react-redux';
import {ReduxRouter} from "redux-react-router";
import {Route} from "react-router"
import createBrowserHistory from "history/lib/createBrowserHistory"
import configureStore from './store';
import App from "./containers/App";
import Home from "./components/Home";
import Countries from "./components/Countries";
import {fetchData} from './actions/actions';
import routes from "./routes";
const history = new createBrowserHistory();
const store = configureStore();
function loadData() {
store.dispatch(fetchData('https://restcountries.eu/rest/v1/all'))
}
ReactDOM.render(
<Provider store={store}>
<ReduxRouter>
<Route history={history}>
{routes(loadData)}
</Route>
</ReduxRouter>
</Provider>,
document.getElementById('root')
);
routes.js
import React from "react";
import { Provider } from 'react-redux';
import {ReduxRouter} from "redux-react-router";
import {Route} from "react-router"
import App from "./../containers/App";
import Home from "./../components/Home";
import Countries from "./../components/Countries";
function router(loadData) {
return (<Route component={App}>
<Route path='/' component={Home} />
<Route path='/countries' component={Countries} onEnter={loadData} />
</Route>);
}
export default router;