react-route,react-hot-loader.webpack (You cannot change ; it will be ignored)

后端 未结 7 1337
有刺的猬
有刺的猬 2021-02-13 13:16

it\'s my first project that use react,react-router,react-hot-loader,webpack-dev-server and webpack. when I chang

相关标签:
7条回答
  • 2021-02-13 13:29

    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>
          );
        }
    }
    
    0 讨论(0)
  • 2021-02-13 13:35

    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>
    )
    
    0 讨论(0)
  • 2021-02-13 13:37

    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>
        )
      }
    }

    0 讨论(0)
  • 2021-02-13 13:39

    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;
    
    0 讨论(0)
  • 2021-02-13 13:42

    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>
           );
        }
    }
    
    0 讨论(0)
  • 2021-02-13 13:51

    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'));

    0 讨论(0)
提交回复
热议问题