Reactjs 无法通过浏览器地址行导航到具有路由的react组件

这是我的

App.jsx

文件：

ReactDOM.render(<Router>
    <Switch>
      <Route exact path="/" component={Content} />
      <Route path="/login" component={Auth} />
    </Switch>
  </Router>, document.getElementById("root"));

这是我的

登录

组件

export default class Login extends React.Component {
  //constructor

  login() {
    // axios request
    this.setState({ userLoggedIn: true });
  }

  render() {
    return this.state.userLoggedIn ? (
      <Redirect to="/" />
    ) : (
      <div className="base-container">
          <button type="button" className="btn" onClick={this.login}>
            Login
          </button>
        </div>
      </div>
    );
  }
}

导出默认类登录扩展React.Component{
//建造师
登录（）{
//axios请求
this.setState（{userLoggedIn:true}）；
}
render（）{
是否返回this.state.userLoggedIn(
) : (
登录
);
}
}

我尝试启动默认的react路由器示例，但它对我无效：

export default function BasicExample() {
    return (
      <Router>
        <div>
          <Switch>
            <Route exact path="/">
              <Home />
            </Route>
            <Route path="/about">
              <About />
            </Route>
            <Route path="/dashboard">
              <Dashboard />
            </Route>
          </Switch>
        </div>
      </Router>
    );
  }
  
  function Home() {
    return (
      <div>
        <h2>Home bla</h2>
      </div>
    );
  }
  
  function About() {
    return (
      <div>
        <h2>About</h2>
      </div>
    );
  }
  
  function Dashboard() {
    return (
      <div>
        <h2>Dashboard</h2>
      </div>
    );
  }

导出默认函数BasicExample（）{
返回(
);
}
函数Home（）{
返回(
家庭bla
);
}
函数About（）{
返回(
关于
);
}
函数仪表板（）{
返回(
仪表板
);
}

---

可能问题是我开发了带有ASP核心后端的react应用程序，但有一些限制？

尝试在登录页面中控制台userLoggedIn。可能是第一次没有定义。将userLoggedIn更改为prop，并将其从auth发送到登录页面

  render() {
    return this.state.userLoggedIn ? (
      <Redirect to="/" />
    ) : (
      <div className="base-container">
          <button type="button" className="btn" onClick={this.login}>
            Login
          </button>
        </div>
      </div>
    );
  }

render（）{
是否返回this.state.userLoggedIn(
) : (
登录
);
}

我解决了这个问题。问题出在我与React应用程序一起使用的ASP Core 3中。我从中找到了答案，这对我很有帮助。

---

对不起，我没有注意到ASP，我只是没有注意到它可能很重要=）谢谢大家的帮助

你在哪里渲染

重定向

组件？您能提供一个更全面的代码示例吗？我看不出您不能直接访问“/login”的问题/原因。添加了更多信息似乎您已经编辑了一些代码，您能否创建一个运行的代码沙盒来准确地再现您看到的问题？

  render() {
    return this.state.userLoggedIn ? (
      <Redirect to="/" />
    ) : (
      <div className="base-container">
          <button type="button" className="btn" onClick={this.login}>
            Login
          </button>
        </div>
      </div>
    );
  }