Reactjs 当路由位于不同的文件中时，如何在react路由器中重定向

如果用户未登录，我试图重定向到登录页面。当我在App.js中使用路由时，它工作得很好，但在为路由创建了单独的文件之后，我就不行了

route.js

import React from 'react';
import Login from './Login';
import Register from './Register';
import Home from './Home';
import './style.css';
import { Route, Switch } from 'react-router-dom';

const routes = (
        <Switch>
            <Route key="0" path="/" exact render={ props => <Home {...props} />} />
            <Route key="1" path="/login" render={ props => <Login {...props} />} />
            <Route key="2" path="/register" render={ props => <Register {...props} />}  />
            <Route key="2" path="/home"  render={ props => <Home {...props} /> } />
        </Switch>
        );

export default routes;

从“React”导入React；
从“./Login”导入登录名；
从“./寄存器”导入寄存器；
从“./主页”导入主页；
导入“/style.css”；
从“react router dom”导入{Route，Switch}；
常数路由=(
} />
} />
}  />
} />
);
导出默认路径；

App.js

class App extends Component {
  state={
    isLogin:false
  }
  render() {
    return (

      <div className="App">
      <Router>
      <Header/>
    <div className="container">
      {routes}

    </div>
    </Router>

      </div>
    );
  }
}

类应用程序扩展组件{
陈述={
伊斯洛金：错
}
render（）{
返回(
{routes}
);
}
}

我以前的溃败状态是

const routes = (
           <Switch>
            <Route key="0" path="/" exact render={ () => this.state.login ? ( <Home/> ): ( <Redirect to="/login"/> )} />} />
            <Route key="1" path="/login" render={ props => <Login {...props} />} />
            <Route key="2" path="/register" render={ props => <Register {...props} />}  />
            <Route key="2" path="/home"  render={ () => this.state.login ? ( <Home/> ): ( <Redirect to="/login"/> )} />
          </Switch>
        );

const路由=(
this.state.login？（）：（）}/>
} />
}  />
this.state.login？（）：（）}/>
);

---

因此，我希望这些路由能够正常工作。

我制作了一个小沙盒，向您展示如何操作，我们将路由创建为一个函数，该函数从

App

获取

isLogin

状态，并基于该值呈现正确的组件

const Home = () => <h1>Home</h1>;
const Login = () => <h1>Login</h1>;
const Register = () => <h1>Register</h1>;

const Nav = () => (
  <div>
    <Link to="/">Home</Link>
    <Link to="/login">Login</Link>
    <Link to="/register">Register</Link>
  </div>
);
// Takes isLogged from this.state
const routes = isLogged => (
  <Switch>
    <Route
      path="/"
      exact
      render={() => (isLogged ? <Home /> : <Redirect to="/login" />)}
    />
    } />
    <Route path="/login" render={props => <Login {...props} />} />
    <Route path="/register" render={props => <Register {...props} />} />
    <Route
      path="/home"
      render={() => (isLogged ? <Home /> : <Redirect to="/login" />)}
    />
  </Switch>
);

class App extends Component {
  state = {
    isLogin: false
  };

  toggleLogin = () =>
    this.setState(prevState => ({
      isLogin: !prevState.isLogin
    }));

  render() {
    const { isLogin } = this.state;

    return (
      <Router>
        <div className="App">
          <button onClick={this.toggleLogin}>Toggle Login</button>
          <Nav />
          <h1>{`isLogin ${isLogin}`}</h1>
          {/* invoke routes with isLogin */}
          {routes(isLogin)}
        </div>
      </Router>
    );
  }
}

consthome=（）=>Home；
const Login=（）=>Login；
常量寄存器=（）=>寄存器；
常量导航=（）=>(
家
登录
登记
);
//从该.state获取ISLoged
const routes=isLogged=>(
（isLogged？：）}
/>
} />
} />
} />
（isLogged？：）}
/>
);
类应用程序扩展组件{
状态={
伊斯洛金：错
};
toggleLogin=（）=>
this.setState（prevState=>({
isLogin:！prevState.isLogin
}));
render（）{
const{isLogin}=this.state；
返回(
切换登录
{`isLogin${isLogin}`}
{/*使用isLogin*/}调用路由
{路由（isLogin）}
);
}
}

---

没有问题，只是您需要导入

路由

，以及app.js中导入路由的导入程序。/route和使用