여러 경로를 한 번에 보여주는 리액트라우터 v4

여러 경로를 한 번에 보여주는 리액트라우터 v4

나는 리액터-루터-돔을 사용한 나의 라우팅이 모든 루트를 한 번에 보여주는 문제가 있다.그래서 내가 앱 구성 요소와 라우팅을 포함하는 시작을 렌더링할 때, 나는 각 라우트의 페이지를 서로 위로 보고 있다.그래서 다음과 같이 보인다.

Sooo가 이 모든 것이 어떻게 시작되는지를 시작하려면, 이것이 페이지에서 앱 구성 요소를 렌더링하는 내 인덱스.jsx이다.

// Dependencies
import React from 'react';
import ReactDOM from 'react-dom';

// Components
import App from './components/app.jsx';

// Styles
import './index.scss';

const container = document.getElementById('main');

ReactDOM.render(<App />, container);

내 앱 구성 요소에서 라우팅은 다음과 같이 설정된다.

// Dependencies
import React from 'react';
import { BrowserRouter as Router, Route, Match, Miss } from 'react-router-dom';

// Components
import Login from './pages/login/login.jsx';
import Home from './pages/home/home.jsx';

// Styles
import './app.scss';

const App = () => {
  return (
    <Router>
      <div>
          <Route exact pattern='/' component={Login}/>
          <Route exact pattern='/home' component={Home}/>
      </div>
    </Router>
  );
};

export default App;

내 Login/Home 구성 요소(Home 구성 요소는 Login을 대체하는 것과 정확히 동일함):

// Dependencies
import React from 'react';

// Styles
import './login.scss';

class Login extends React.Component {
  render() {
    return (
      <div className="content">
        <div className='title'>
            Login Page
        </div>
      </div>
    );
  }
}

export default Login;

내가 찾아갔을때도 알아차렸지http://localhost:9999/home나는 또한 이 오류를 받고 있다:

분명히 뭔가 잘못 연결되어 있는 것 같은데, 다른 버전이 있는 설명서 때문에 좀 헷갈린다.그리고 이것을 고치는 방법에 대한 조언은 매우 고마워!

반응 교육 시작:

경로가 없는 경로는 항상 일치한다.

그래서 너의 경우는 네가 패턴을 사용하기 때문에 항상 일치할 거야.

스위치 태그를 추가하십시오.그것은 당신의 구성 요소들 사이에서 전환될 것이다.

const App = () => { 
return ( <Router> 
          <Switch>  <Route exact path='/' component={Login}/> 
          <Route exact path='/home' component={Home}/> 
          </Switch> 
         </Router> ); };

참조URL: https://stackoverflow.com/questions/44350506/react-router-v4-showing-multiple-routes-at-once