React Route URL

Question

Ich bin neu mit React. Ich verwende 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; 

Ich verwende dieses alles Code funktioniert gut, aber wenn ich zu localhost:8080/login direkt über de url gehen bekomme ich einen Fehler Cannot GET /login aber es geht auch über einen Link <Link to='/login'>Login</Link>.

Wie kann ich es beheben?

Answer 1

Also das ist oft eine schwierige Sache, die ich in Bezug auf die Navigation mit reagieren.

Wenn Sie direkt zu/login navigieren, hat Ihre React App nicht den höchsten Parent oder den obersten root gerendert und somit gibt es wirklich keine Login-Komponente zum Suchen und Rendern. Hier ist, was ich tue, wenn mit Logins und zu Hause aus arbeiten

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

Dies sagt, wenn es keine Auth (oder lokale Speicher oder Cookies, oder was auch immer Sie verwenden sie eingeloggt sein) umleiten zurück nach Hause oder zu/So können sie klicken/einloggen.

Grundsätzlich brauchen Sie Ihre höchste Komponente, um virtuell zu montieren, bevor Sie etwas anderes tun können. Sie können auch Ihre Zielseite erstellen/anmelden, also in diesem Fall merge/und/login. Aber das obige Beispiel ist modularisiert und dynamisch.