Question

我是React的新手。我正在使用react-router-dom。

import React from 'react';
import { Router, Route, Switch, Link } from 'react-router-dom';
import Home from './components/home';
import Login from './components/login';

class App extends React.Component {

constructor(props) {
    super(props);
}

render() {
    return (
        <div className="app">
          <Link to='/'>Home</Link>
          <Link to='/login'>Login</Link>
          <Switch>
            <Route exact path='/' component={Home}/>
            <Route path='/login' component={Login}/>
          </Switch>
        </div>
    );
  }
}
export default App;

我正在使用此代码一切正常，但当我通过de url直接转到localhost:8080/login时，我收到错误Cannot GET /login，但它通过链接<Link to='/login'>Login</Link>很顺利。< / p>

我该如何解决？

Answer 1

因此，对于使用反应进行导航，这通常是一个棘手的问题。

直接导航到/登录您的React App实际上并没有呈现最高的父或根，因此确实没有要查找和呈现的登录组件。这是我在使用登录和家庭时所做的事情

<Route exact path="/" component={() => this.props.auth ? <DashboardContainer/> : <Redirect to="/" />}/>

这表示如果没有任何身份验证（或本地存储，或cookie，或您用于登录的任何内容）重定向回家或/或他们可以点击/login。

基本上，在您可以执行任何其他操作之前，您需要使用最高级别的组件进行虚拟安装。您还可以登录/登录您的登录页面，因此在这种情况下，合并/和/登录。但上面的例子是模块化和动态的。

反应路线网址

1 个答案: