React Route URL

나는 React와 (과) 새로운입니다. react-router-dom을 사용하고 있습니다.React Route URL

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>을 통해 잘 어울린다.

어떻게 해결할 수 있습니까?

출처

2017-12-16 Jur Dekker

이 답변을 확인하십시오. https://stackoverflow.com/questions/40332753/react-changing-url-with-react-router-and-webpack-gives-page-not-found-error/40338808#40338808 –

@ ShubhamKhatri가 거의 문제는 아니지만 다음 문제를 발견했습니다. 어떻게 http : // localhost : 8080/#/home에서'# '을 제거 할 수 있습니까? –

HashRouter를 사용하는 대신 BrowserRouter –

그래서 이것은 종종 반응을 가지고 탐색하는 것과 관련하여 까다로운 일입니다.

직접/로그인으로 이동하면 실제 앱은 상위 또는 상위를 렌더링하지 않으므로 찾기 및 렌더링을위한 로그인 구성 요소가 실제로 없습니다. 로그인과 집이 말한다

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

작업을 할 때 가정이나에 다시 리디렉션 (당신이 그들에 로그인하는 데 사용하는 어떤 또는 로컬 스토리지, 또는 쿠키 또는) 어떤 인증이없는 경우 여기에 내가 할 수 있는지/그래서 그들은/login을 클릭 할 수 있습니다.

기본적으로 다른 작업을 수행하기 전에 최고 수준의 구성 요소가 필요합니다. 또한 방문 페이지를 만들거나 로그인 할 수 있으므로이 경우 /와/login을 병합하십시오. 그러나 위의 예는 모듈화되고 동적입니다.

출처

2017-12-16 16:41:16

답변

관련 문제