リアクト・ルートのURL

Question

私はリアクトの新人です。私は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; 

私は、このコードのすべてが正常に動作し使用していますが、私はデURLを介して直接localhost:8080/loginに行くとき、私は、エラーCannot GET /loginを得るが、それは、リンク<Link to='/login'>Login</Link>を通じてよく合います。

どうすれば修正できますか？

Answer 1

これは、しばしば私が反応でナビゲートすることに関して扱う難しいことです。

あなたのReact Appに直接ナビゲートすると、実際に親またはルートが最も高くレンダリングされていないため、実際には見つけてレンダリングするログインコンポーネントはありません。ここに帰っリダイレクトまたはに任意の認証（またはローカルストレージ、またはクッキー、またはあなたがそれらをログインに使用しているものは何でも）が存在しない場合、これは言うログインおよびホーム

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

で作業するとき、私は何をすべきかです/彼らはクリック/ログインすることができます。

基本的には、何か他のことをする前に、実質的にマウントするために最高レベルのコンポーネントが必要です。ランディングページを作成/ログインすることもできます。この場合、/と/ loginをマージします。しかし、上記の例はモジュール化され、動的です。