Reactjs 反应重定向不渲染组件

我目前正在学习React，现在我正在尝试在React中实现重定向。 我有一个名为logout.js的文件，它将用户重定向到另一个文件Mello.js。当浏览器中的URL更改为

/Mello

时，重定向成功，但未呈现相同的组件。我的logout.js文件是：

import React from 'react';
import axios from 'axios';
import {BrowserRouter as Router,Route,Switch,Redirect} from 'react-router-dom';
import Hello from './Hello';
import Mello from './Mello';
class logout extends React.Component{
constructor(props){
    super(props);
    this.state={
        isloggedout: false
    }
}
componentDidMount(){
    axios.get("http://127.0.0.1:3000/logout").
    then(res=>{this.setState({isloggedout:res.data.state})});
    console.log("hello from logout");
}
render(){
    return (
        this.state.isloggedout?<Router><Redirect to="/Mello" /></Router>:<p>Not allowed</p>
        );
}
}
export default logout;

从“React”导入React；
从“axios”导入axios；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch，Redirect}；
从“./Hello”导入Hello；
从“/Mello”导入Mello；
类注销扩展了React.Component{
建造师（道具）{
超级（道具）；
这个州={
伊斯洛格杜特：错
}
}
componentDidMount（）{
axios.get（“http://127.0.0.1:3000/logout").
然后（res=>{this.setState（{isloggedout:res.data.state}）}）；
log（“来自注销的你好”）；
}
render（）{
返回(
this.state.isloggedout？：不允许

);
}
}
导出默认注销；

Mello.js是：

import React from 'react';
class Mello extends React.Component{
constructor(props){
    super(props);
}
render(){
    console.log("Hello from Mello");
    return(<div>
        <h1>Hello from Mello</h1>
        </div>
        );
}
};

export default Mello;

从“React”导入React；
类Mello扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
log（“来自梅洛的你好”）；
返回(
梅洛，你好
);
}
};
出口违约梅洛；

我设置所有路线的代码：

<Router>
            <Switch>
                <Route exact path="/" component={Hello} />
                <Route exact path="/Mello" component={Mello} />
                <Route exact path="/logout" component={logout} />
            </Switch>
</Router>

当重定向发生时，控制台上没有打印任何内容（甚至没有任何错误），h1标记也是如此。 我真的很感激任何帮助。 谢谢大家!

您的

和

位于不同的路由器中，因此它们没有连接

它们必须位于同一个

元素中。

{this.state.isloggedout? <Router><Redirect to="/Mello" /><Switch> <Route exact path="/Mello" component={Mello} /></Switch></Router>}

{this.state.isloggedout？}

（这可能不是最好的方法，但最根本的问题是您的

和

必须属于同一个

或

{loggedIn？：}

不，我已经用与您编写的相同的方式进行了设置。这是在另一个名为app的文件中。js从您的代码中看似乎不是这样的-可能会更新您的代码以便我们可以看到它，看起来您有两个独立的路由器。如果您将路由器放在内部会发生什么？它工作了。但是您能告诉我您是如何得到这个想法和建议的吗为什么会起作用？虽然我进口了梅洛，但在我尝试的时候它不起作用

<Router>
<Switch>
  <Redirect from='/old-path' to='/new-path' />
  <Route path='/new-path'>
    <Place />
  </Route>
</Switch>
</Router>

<Router>
<Route exact path="/">
  {loggedIn ? <Redirect to="/dashboard" /> : <PublicHomePage />}
</Route>
</Router>