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>
Related
I have a build package from React, once I deploy it to the server with name admin, I can not get to that folder with www.home.com/admin, so to get to my project I need to append / and once I write www.home.com/admin/ my project executes.
I changed in package.json "homepage": "." to make relative path and I use HashRouter
How I can handle this, because every time I need to add / to the path in browser
import React, { Component } from 'react';
import './App.css';
import {Route, Switch, HashRouter as Router} from 'react-router-dom'
import {store ,persistor} from './components/store/index';
import { PersistGate } from 'redux-persist/integration/react';
import { Provider } from 'react-redux';
import Display from './components/displayMainScreen/displayMainScreen'
import SignIn from './components/login/indexLogin'
import Logs from './components/logs/logs';
class App extends Component {
render() {
return (
<div className="App">
<Provider store={store}>
<PersistGate persistor={persistor}>
<Router>
<Switch>
<Route exact path='/' component = {SignIn} />
<Route path='/login' component = {SignIn} />
<Route path='/display' component = {Display} />
<Route path='/logs' component = {Logs} />
</Switch>
</Router>
</PersistGate>
</Provider>
</div>
);
}
}
export default App;
I just upgraded to React Router v4 with a react 15.4.2 app based on a boilerplate from Fountain JS and after reading this article, I wrote this:
// Index.js
import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import {Route, BrowserRouter, Switch} from 'react-router-dom';
import {Main} from './app/pages/main';
import {App} from './app/pages/app';
import './index.scss';
const MainRouter = () => (
<div>
<main>
<Switch>
<Route path="/home" component={Main}/>
<Route path="/app" component={App}/>
</Switch>
</main>
</div>
);
ReactDOM.render(
<BrowserRouter>
<MainRouter/>
</BrowserRouter>,
document.getElementById('root')
);
// App.jsx
import React, {Component} from 'react';
import {Switch, Route} from 'react-router-dom';
import PropTypes from 'prop-types';
import {Dashboard} from './app/dashboard';
import {Money} from './app/money';
import {Header} from '../tpl/header';
import {Footer} from '../tpl/footer';
export class App extends Component {
render() {
return (
<div>
<Header/>
<main>
<Switch>
<Route path="/app/dashboard" exact component={Dashboard}/>
<Route path="/app/money" exact component={Money}/>
</Switch>
</main>
<Footer/>
</div>
);
}
}
// dashboard.jsx
import React, {Component} from 'react';
export class Dashboard extends Component {
render() {
return (
<div>
<h1>This is the Dashboard</h1>
</div>
);
}
}
Navigating to http://localhost:3000/app/ seems to work fine but navigating to http://localhost:3000/app/dashboard gives 404. What could I be possibly getting wrong?
PS Even on the routes that work, adding a trailing slash will not work.
You need to correct dashboard route at the end of App's render. No need for another Switch over there. So in your App.jsx file's render method :
render() {
return (
<div>
...
<Route path="/app/dashboard" component={Dashboard}/>
</div>
);
}
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.
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
I think i got a problem using a very basic react router implementation.
When i load my "localhost:8080/dist/", it WORKS, load the header component that is being imported on App, and load the IndexRoute properly, but when i try to access "localhost:8080/dist/FPDV0200" or "localhost:8080/dist/FPDV0400" it dosnt work. Any clues?
app.component.tsx
import * as React from 'react';
import Header from '../header/header.component';
class App extends React.Component<any, any> {
render() {
return (
<div id="app">
<Header />
<div>
{this.props.children}
</div>
</div>
);
}
}
export default App;
app.component.tsx
import * as React from 'react';
import { Router, hashHistory, Route, IndexRoute } from 'react-router';
import App from '../components/structure/app/app.component';
import Home from '../pages/home/home';
import FPDV0200 from '../pages/FPDV0200/FPDV0200';
import FPDV0400 from '../pages/FPDV0400/FPDV0400';
const routes = (
<Router history={hashHistory}>
<Route path="/" component={App}>
<IndexRoute component={Home}/>
<Route path="FPDV0200" component={FPDV0200}/>
<Route path="FPDV0400" component={FPDV0400}/>
</Route>
</Router>
);
export default routes;
localhost:8080/dist/FPDV0200 - this url should work in case of usage browserHistory.
You use hashHistory, so your url should look like this
localhost:8080/dist#FPDV0200