I may have done silly mistake this time but I am but getting it what. I started with react router v4 but my routing is not happening. I try to hit url manually as well as by button click no result. here's my route config. and FYI I am using LinkContaier to redirection
import ReactDOM from 'react-dom';
import React from 'react';
import { Provider } from 'react-redux';
import configureStore from './stores/configureStores';
import {BrowserRouter,Route,Switch} from 'react-router-dom'
import HeaderContainer from "./containers/HeaderContainer"
import ProgramProfileContainer from "./containers/ProgramProfileContainer"
const store = configureStore();
ReactDOM.render(
<Provider store={store}>
<BrowserRouter >
<Switch>
<HeaderContainer/>
{/* <Route exact path="/" component={HeaderContainer}/> */}
<Route path="program-profile/:program_id" component={ProgramProfileContainer}/>
</Switch>
</BrowserRouter>
</Provider>, document.getElementById('root')
);
this is my container
import React from "react"
import { connect } from 'react-redux';
export default class ProgramProfileContainer extends React.Component{
render(){
console.log("program profile")
return(
<h1> this is profile </h1>
)
}
}
i hit the url like program-profile/3 but rendered nothing no error in console also
Don't use switch inside browser router :
ReactDOM.render(
<Provider store={store}>
<BrowserRouter >
<div>
<Route exact path="/" component={HeaderContainer}/>
<Route path="/program-profile/:program_id" component={ProgramProfileContainer}/>
</div>
</BrowserRouter>
</Provider>, document.getElementById('root')
);
Your answer seems to be ok. But this is how I do it normally.
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import promise from 'redux-promise';
import reducers from './reducers';
import ProgramProfileContainer from "./containers/ProgramProfileContainer"
const store = configureStore();
ReactDOM.render(
<Provider store={store}>
<BrowserRouter>
<div>
<Switch>
<Route path="program-profile/:program_id" component={ProgramProfileContainer} />
<Route path="/" component={IndexPage} />
</Switch>
</div>
</BrowserRouter>
</Provider>
, document.querySelector('.container'));
When you use Link it should be like this.
<Link to={`/posts/${post.id}`}>
{post.title}
</Link>
If you have any error messages in console, please post them so that we can help you further. Hope this helps. Happy coding.
Related
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 :)
So I have my App.tsx
I use switch from react-router 4
import { Rate } from 'antd'
import * as React from 'react'
import './App.scss'
import { Route, Switch } from 'react-router' // react-router v4
class App extends React.Component {
public render() {
return (
<div className="App">
<div> { /* your usual react-router v4 routing */}
<Switch>
<Route exact path="/" render={() => (<div>Match</div>)} />
<Route render={() => (<div>Miss</div>)} />
<Rate />
</Switch>
</div>
</div>
)
}
}
export default App
And I have index.tsx like this
Here I use connected-react-router to connect to redux.
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import App from './App'
import './index.scss'
import registerServiceWorker from './registerServiceWorker'
import store, { history } from './store'
import { Provider } from 'react-redux'
import { ConnectedRouter } from 'connected-react-router'
ReactDOM.render(
<Provider store={store}>
<ConnectedRouter history={history}> { /* place ConnectedRouter under Provider */}
<App />
</ConnectedRouter>
</Provider>,
document.getElementById('root') as HTMLElement
)
registerServiceWorker()
As you can see Router indeed has just one element however I get an error that the router should have only one child. Is this a bug of connected-react-router or am I just missing something in here?
The comment inside the ConnectedRouter component causes the problem. As it turns out, comments also count as children. Fix it by moving the comment one line above:
ReactDOM.render(
<Provider store={store}>
{ /* place ConnectedRouter under Provider */}
<ConnectedRouter history={history}>
<App />
</ConnectedRouter>
</Provider>,
document.getElementById('root') as HTMLElement
)
I have started with react-router-dom. my main page rendered successfully but when I am clicking on hyper provided by Link component it is not redirecting but if I hit url manually it is giving me 404 error. please help me in this?
here is my config file
import React from 'react'
import { render } from 'react-dom'
import { createStore, applyMiddleware,compose } from 'redux'
import { Provider } from 'react-redux'
//import rootReducer from './reducers'
import createLogger from 'redux-logger'
import thunk from 'redux-thunk'
import {BrowserRouter} from 'react-router-dom'
import promise from "redux-promise-middleware"
import logger from "redux-logger"
import {fetchUsers} from "./action/UserAction"
import {fetchChart} from "./action/ChartAction"
import {fetchNames} from "./action/SearchAction"
import reducer from "./reducers"
import routes from "./routes"
const middleware = applyMiddleware(promise(), thunk, logger())
const store= createStore(reducer,middleware)
store.dispatch(fetchUsers());
store.dispatch(fetchChart());
render(
<Provider store={store}>
<BrowserRouter >
{routes}
</BrowserRouter>
</Provider>,
document.getElementById('root')
)
my routes file
import App from "./pages/App"
import Users from "./pages/Users"
import Charts from "./pages/Charts"
import React from "react"
import { Route } from "react-router-dom"
export default (
<switch>
<Route path="/" component={App}/>
<Route path="/users" component={Users}/>
<Route path="/charts" name="charts" component={Charts}/>
</switch>
);
App.js
import {Link} from "react-router-dom"
import React from "react"
const App = () =>(
<div>
<h1> this is main page </h1>
<Link to="charts">charts</Link>
</div>
)
export default App
Users.js
import React from "react"
const User = () =>(
<div>
<h1> this is user </h1>
</div>
)
export default User
Charts.js
import React from "react"
const Chart = () => (
<h1> this is chart </h1>
)
export default Chart
UPDATE 1:
I do not know what is going on. but I alter the sequence in routes.js it is working by clicking on url. but still if I hit the url manually or refresh there it is still not working. below is my updated routes.js
import App from "./pages/App"
import Users from "./pages/Users"
import Charts from "./pages/Charts"
import React from "react"
import { Route,Switch } from "react-router-dom"
export default (
<Switch>
<Route path="/charts" component={Charts}/>
<Route path="/users" component={Users}/>
<Route path="/" component={App}/>
</Switch>
);
UPDATE 2:
if I am using exact path then sequence does not matter. I think I didn't understand use of exact path correctly. but still while hitting url manually or refreshing is not working for me
my final routes.js
import App from "./pages/App"
import Users from "./pages/Users"
import Charts from "./pages/Charts"
import React from "react"
import { Route,Switch } from "react-router-dom"
export default (
<Switch>
<Route exact path="/" component={App}/>
<Route exact path="/charts" component={Charts}/>
<Route exact path="/users" component={Users}/>
</Switch>
);
After struggling I got a SO post saying that if my data is not mapping from backend I should use HashRouter. So I changed my browser so I changed my code to this. but I don't know why browser router didn't work
<Provider store={store}>
<HashRouter >
{routes}
</HashRouter>
</Provider>,
document.getElementById('root')
If you are using webpack add this
devServer: {
historyApiFallback: true,
}
when using BrowserRouter "historyApiFallback" should be true
In my index.js file:
import React from 'react';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom';
import App from './App';
import Contact from './Contact';
import ReactDOM from 'react-dom';
//import RouterMapping from './RouterMapping';
const RouterMapping = () => (
<Router>
<Route exact path='/' component={App} />
<Route path='/contact' component={Contact} />
</Router>
);
ReactDOM.render(
<RouterMapping />,
document.getElementById('root')
);
When rendering the page /, it displays nothing (should go to App component per my understanding. The App component itself is running OK if I replace:
ReactDOM.render(
<RouterMapping />,
document.getElementById('root')
);
to
ReactDOM.render(
<App />,
document.getElementById('root')
);
Did I do something fundamentally wrong? Newbie to React...
Update on Mar 16
I think I figured out how to make the router work.
I have refactored my RouterMapping to RoutingConfig as below:
import React from 'react';
import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom';
import Home from './Home';
import Contact from './Contact';
const RoutingConfig = () => (
<Router>
<div>
<Route exact path="/" component={Home}/>
<Route path="/contact" component={Contact}/>
</div>
</Router>
);
export default RoutingConfig;
Nothing peculiar.
Now, instead of rendering RoutingConfig in my index.js, I still render the App component in my index.js:
ReactDOM.render(
<App />,
document.getElementById('root')
);
The routing mapping is done now in App.js:
class App extends Component {
render() {
return (
<RoutingConfig />
);
}
}
Now it works. Please see attached screenshot:
My explanation
I think the key here is to demote the RoutingConfig to App.js. From index.js render App.js, App.js will act as the entry point to my whole app and determine which component (Home, Contact) to load based on routing.
Above for your information and hope it is helpful.
My problem is react-route display blank page and no error display in console or webpack. I try to delete all Router and replace by App but it show me blank page agian.
This is my main.js file.
import React from 'react'
import ReactDOM from 'react-dom'
import {Provider} from 'react-redux'
import {createStore, combineReducers} from 'redux'
import { Router, Route, browserHistory, IndexRoute } from 'react-router'
import Index from './containers/Index.js'
import App from './containers/App.js'
import pollReducer from './reducers/pollReducer.js'
var reducers = combineReducers({
poll: pollReducer
})
var store = createStore(reducers);
ReactDOM.render(
<Provider store={store}>
<Router>
<Route path="/" component={Index} />
<Route path="/question" component={App} />
</Router>
</Provider>
, document.getElementById('app'))
and this is my App and Index js file
import React from 'react'
class App extends React.Component {
render(){
return(
<div>
This is App page
</div>
)
}
}
export default App
This is my Index.js file
import React from 'react'
class Index extends React.Component {
render(){
return(
<div>
This is asdasdasda
</div>
)
}
}
export default Index
Thank you for help.
Because you forgot to define the history, Use this:
<Router history={browserHistory}>
<Route path="/" component={Index} />
<Route path="/question" component={App} />
</Router>