Respect Router v4 루트가 작동하지 않음

Respect Router v4 루트가 작동하지 않음

저는 반응하는 것이 비교적 처음이라 어떻게 반응 라우터를 작동시킬지 고민하고 있습니다.다음과 같은 매우 간단한 테스트 앱이 있습니다.

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

import {BrowserRouter as Router, Route, Switch, IndexRoute, Link} from 'react-router-dom';

const Home = () => <h1><Link to= "/about">Click Me</Link></h1>
const About = () => <h1>About Us</h1>

const Test = () => (
  <Router>
    <Switch>
    <Route path ="/" component = {Home} />
    <Route path ="/about" component = {About} />
    </Switch>
  </Router>
)

ReactDOM.render(<Test />, document.getElementById('app'));

앱을 실행하면 홈 컴포넌트가 문제없이 로딩되고 "Click Me" 링크를 클릭하면 URL이 localhost/about으로 변경되지만 아무 일도 일어나지 않습니다.새로 고침을 클릭하면 "Cannot GET /about"이라는 메시지가 나타납니다.분명히 내가 뭘 잘못하고 있는 것 같은데 뭐가 뭔지 알아내지 못했어.저도 웹팩을 사용하고 있습니다.

경우 정확한 ./ 않으면, 그것은 할 것입니다./about.

<Route exact path="/" component={Home} />

코멘트에서 언급했듯이, 이 간단한 것에 대해서는 서버 코드와 웹 팩 설정이 모두 올바른지 확인하는 Create React App을 사용할 것을 권장합니다.사용 후create-react-app 돼요npm 라우터 해, 를 「v4」에 넣습니다.App.js그러면 작동하게 됩니다.와 함께 할 수 .create-react-app다음과 같이 합니다.

// App.js
import React from 'react';

import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

const Home = () => <h1><Link to="/about">Click Me</Link></h1>
const About = () => <h1>About Us</h1>

const App = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </Switch>
  </Router>
)

export default App;

React Router V4 매뉴얼에 기재되어 있는 퀵스타트 순서를 참조해 주세요.

localhost에서 실행하는 경우 historyApiFallback: true를 webpack.config 파일에 추가해야 합니다.

「」를 추가하는 exact제제문문문으로 했습니다.이것으로 교체했습니다.

  <Route exact path="/" component={App} />
  <Route path="/login" component={Login} />
  <Route path="/register" component={Register} />

이것

  <Route exact path="/"> <App /> </Route>
  <Route path="/login"> <Login /> </Route>
  <Route path="/register"> <Register /> </Route>

컴포넌트를 Route Child에 배치하여 페이지 라우팅을 해결합니다.다른 사람에게도 도움이 되었으면 합니다.

Switch를 사용할 때는 가장 고유하고 일반적인 루트를 지정해야 합니다.당신의 경우, 당신은 다음을 지정했습니다."/" 전에"/about" 매번 이 찾고 "/about" 내려가다<Route "/" 만족시키다"/about"왜냐하면) "/about" is is is is---------의 입니다."/"사용방법: "/" 앞에 "/about"을 붙입니다.

이렇게 하면 정확하게 생략할 수도 있습니다.

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

import {BrowserRouter as Router, Route, Switch, IndexRoute, Link} from 'react-router-dom';

const Home = () => <h1><Link to= "/about">Click Me</Link></h1>
const About = () => <h1>About Us</h1>

const Test = () => (
  <Router>
    <Switch>
        <Route path ="/about" component = {About} />
        <Route path ="/" component = {Home} />
    </Switch>
  </Router>
)

ReactDOM.render(<Test />, document.getElementById('app'));

또한 기본 경로를 항상 마지막에 유지하여 이 문제를 해결할 수 있습니다.

<Route path ="/about" component = {About} />

<Route path="/" component={Home} />에 // 항상 마지막에

을 no noexact(키워드)

이력을 하는 것을 .Router i i하 i i 。BrowserRouter합니다.history={...}사용할 수 있습니다.를 리다이렉트 했는데, 이력을 리다이렉트하다BrowserRouter자신의 것을 사용하고 있었다.

이것이 일어날 수 있는 또 다른 방법이 있다.바보같은 실수지만 내 경우에는 그게 문제였다.

나의 문제는 수입 오류였다.처음에 저는 다음과 같은 Import를 받았습니다.

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

BrowserRouter 컴포넌트를 더 높은 레벨로 이동시키기로 했습니다만, 사용자가 아닌 라우터 컴포넌트를 삭제하는 동안 Import는 다음과 같이 되었습니다.

import { BrowserRouter as Switch, Route } from 'react-router-dom';

결과적으로 Switch 컴포넌트를 삭제하고 Browser Router를 Switch로 에일리어스했습니다.

Switch가 정상적으로 동작하지 않게 된 것은 정상입니다.

리액트 라우터 V6 를 사용하고 있는 경우, 루트를 다음과 같이 설정합니다.

<Route path="/" component={Home} />

요소를 사용하도록 변경합니다.

<Route path="/" element={<Home />} />

시험해 보다

npm i react-router-dom 

App.js

import Dashboard from './Dashboard';
import { BrowserRouter, Routes , Route, Link, useRouteMatch } from 'react-router-dom';


  return (
    <BrowserRouter>
    <Routes>
      <Route exact path="/"  element={<Dashboard />}></Route>
      <Route path="/dashboard"  element={<Dashboard />}></Route>
    </Routes>
  </BrowserRouter>
  );
}

대시보드.js

export default function Dashboard() {
    return (
      <>
        <h1>Welcome</h1>
      </>
    );
}

이 중 하나가 동작하지 않는 경우는, 이것을 사용해 주세요.리액트 라우터에도 같은 문제가 있었습니다.리액트 라우터 V6을 사용하고 있는데 Route 태그를 Routes 태그에 포함시킴으로써 이 문제를 해결했습니다.

• A <Route>의 자녀로서만 사용될 수 있다<Routes>요소.

import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';

그런 다음 Routes 태그를 묶습니다.

<Router>
    <Routes>
        <Route path ="/about" component = {About} />
        <Route path ="/" component = {Home} />
    </Routes>
</Router>

Routes 태그를 추가하면 문제가 해결되었습니다.도움이 됐으면 좋겠네요.

언급URL : https://stackoverflow.com/questions/43456656/react-router-v4-routes-not-working