无法通过浏览器地址行导航以使用路由反应组件答案

【问题标题】：Cannot navigate to react component with route via browser address line无法通过浏览器地址行导航以使用路由反应组件
【发布时间】：2021-07-24 23:00:05
【问题描述】：

这是我的App.jsx 文件：

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

一切正常，我可以通过<Redirect /> 重定向到这些路由，然后我可以通过浏览器后退按钮返回，但我无法通过浏览器地址行访问具体组件。如果我输入 'localhost:5000/login' 我会收到 404 错误。那么如何通过浏览器地址线访问某个组件呢？

添加这是我的Auth 组件，它决定要呈现Login 或Register 的身份验证形式：

export default class Auth extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isLoginActive: true,
    };

    this.formChange = this.formChange.bind(this);
  }

  formChange() {
    this.setState({ isLoginActive: !this.state.isLoginActive });
  }

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

    let view = isLoginActive ? (
      <Login apiUrl={apiUrl} formChange={this.formChange} history={this.props.history} />
    ) : (
      <Register apiUrl={apiUrl} formChange={this.formChange} history={this.props.history} />
    );

    return (
      <div className="container">
        {getCookie("token") == null ? view : <Redirect to="/" />}
      </div>
    );
  }
}

这是我的Login 组件

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-router 示例，但它对我不起作用：

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

问题可能是我使用 ASP Core 后端开发 React 应用程序并且存在一些限制？

【问题讨论】：

你在哪里渲染Redirect 组件？你能提供一个更全面的代码示例吗？我看不出您不能直接访问“/login”的问题/原因。
添加了更多信息
您似乎已经编辑了一些代码，您能否创建一个 running 代码框来准确重现您看到的问题？

标签： reactjs react-router-dom

【解决方案1】：

尝试在登录页面中控制 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>
    );
  }

【讨论】：

【解决方案2】：

我解决了这个问题。问题出在我与 React 应用程序一起使用的 ASP Core 3 中。我在this question 中找到了答案，它帮助了我。抱歉，我没有注意到 ASP，我只是没有注意它可能很重要 =) 谢谢大家的帮助

【讨论】：