it\'s my first project that use react
,react-router
,react-hot-loader
,webpack-dev-server
and webpack
. when I chang
Only thing you need to do, it's to throw <Route />
out of render() method.
So, there are many ways to solve this issue.
Most Official way is what @Stormy say.
My solution like this:
const routes = (
<Route path="/" component={App}>
<Route path="about" component={About} />
<Route path="inbox" component={Inbox} />
</Route>
)
// Don't let <Route> in render() method
class Routers extends React.Component {
render() {
return (
<Router>
{ routes }
</Router>
);
}
}
Try to use this configuration https://github.com/reactjs/react-router/issues/2704#issuecomment-170940448
const routeConfig = [
{ path: '/:locale',
component: App,
indexRoute: { component: NewsCardsContainer },
...
}
];
return (
<IntlProvider key="intl" {...intlData}>
<Router history={history} routes={routeConfig} />
</IntlProvider>
)
My Solution is change "Reflux.Component" to "React.Component"
class AppRouter extends Reflux.Component {
constructor(props){
super(props);
this.store = AuthStore;
}
requireAuth (nextState, replace, callback) {
if (nextState.location.pathname != '/login' && nextState.location.pathname != '/logout') {
ActionsAuth.jwt.refresh();
}
const token = UtilsJWT().getToken();
if (token){
if (nextState.location.pathname == '/login') {
window.location.href = '/main';
}
callback();
}else{
if (nextState.location.pathname != '/login') {
window.location.href = '/login';
}
}
}
verifyAuth (nextState, replace, callback) {
const token = UtilsJWT().getToken();
if (token){
if (nextState.location.pathname == '/login') {
window.location.href = '/main';
}
callback();
}else{
if (nextState.location.pathname != '/login') {
window.location.href = '/login';
}
callback();
}
}
render(){
return (
<Router history={browserHistory}>
<Route path="/" component={App}>
<IndexRoute component={Login} onEnter={ this.verifyAuth }/>
<Route path="login" component={Login} onEnter={ this.verifyAuth }/>
<Route path="main" component={Main} onEnter={ this.requireAuth }/>
<Route path="logout" component={Logout} onEnter={ this.requireAuth }/>
<Route path="local-sync" component={LocalSync} onEnter={ this.requireAuth }/>
<Route path="*" component={Login} onEnter={ this.verifyAuth }/>
</Route>
</Router>
)
}
}
Stormy's suggestion of using <Router routes={Routes}/>
worked for me. Here are my warning free code snippits with react hot module replacement:
./index.js
import './globals';
import React from "react";
import ReactDOM from "react-dom";
import { AppContainer as HotContainer } from "react-hot-loader";
import { browserHistory } from 'react-router';
import Routes from "./components/Routes.jsx";
const render = function() {
let Router = require('react-router').Router;
ReactDOM.render(
<HotContainer>
<Router history={browserHistory} routes={Routes}/>
</HotContainer>,
document.getElementById('react-container'),
);
};
render();
if( module.hot ) {
module.hot.accept('./components/Routes', () => {
render();
});
}
./components/Routes.jsx
import React from "react";
import { Route, IndexRoute } from "react-router";
import App from "./App.jsx";
import Graphs from "./graphs/Graphs.jsx";
import Trends from "./trends/Trends.jsx";
import Patterns from "./patterns/Patterns.jsx";
const Routes = (
<Route path="/" component={App}>
<IndexRoute component={Graphs}/>
<Route path="graphs" component={Graphs}/>
<Route path="trends" component={Trends}/>
<Route path="patterns" component={Patterns}/>
</Route>
);
export default Routes;
I know this is an old question, but someone might find this useful. I tried a lot of stuff and what finally worked for me is:
import React from 'react'
import ReactDOM from 'react-dom'
import { Router, Route, Link } from 'react-router'
import App from './index/app'
import About from './index/about'
import Inbox from './index/inbox'
class Routers extends React.Component {
private routes = (
<Route path="/" component={App}>
<Route path="about" component={About} />
<Route path="inbox" component={Inbox} />
</Route>
);
render() {
return (
<Router>
{this.routes}
</Router>
);
}
}
i have the same issue,my Solution is change "import { Router, Route, Link } from 'react-router'" to "import {HashRouter, Route, Link} from 'react-router-dom'" my code:
ReactDOM.render((
<HashRouter>
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/login">Login</Link></li>
</ul>
<hr/>
<Route path="/" exact component={createComponent(Home)}/>
<Route path="/login" component={createComponent(Login)}/>
</div>
</HashRouter>
), document.getElementById('root'));