关于React Router的问题

首先

我是个彻头彻尾的新手。这是我的学习记录。

首先进行安装。

npm install react-router-dom

安装后，请导入react-dom-dom库。
为了能够使用BrowserRouter、Switch、Route和Link。

//index.js
mport {
  BrowserRouter,
  Switch,
  Route,
  Link
} from "react-router-dom";

BrowserRouter -> 路由器

在BrowserRouter标签内部可以使用router功能。
每个项目只能使用一次BrowserRouter。
react-router相关组件都要放在较高的层次上使用，以保证全部包含进去。

//index.js

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <>
         {/* ここにreact-router関連のコンポーネントを全て書く */}
      </>
    </BrowserRouter>
  </React.StrictMode>,
  rootElement
);

路线

• ルーティング先のURLと、そのURLで表示したいコンポーネントを指定します。

• pathで遷移先のURLしする。

• componentで表示したいコンポーネントを指定します

exactでURL完全しないと画面遷移されない様にする。react-routerは実はURLが前方一致したコンポーネントを全て表示します。それを予防します。

import App from "./App";

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <>
         <Route path="/" component={APP}/>
      </>
    </BrowserRouter>
  </React.StrictMode>,
  rootElement
);

链接

• LinkはHTMLのaタグと同じような役割。

• toでリンク先を指定することでそこへ遷移できる。

レンダリングされるとaタグに変換する。の中にaタグは含めることができない。

将文件进行分割。

如果按照上述内容进行路由设置，会变得冗长且难以阅读。因此，我们需要创建一个用于路由的文件并进行分割。

src/router/Public.js

import React from "react";
import { Route, Switch } from "react-router-dom";
import Auth from "../components/auth_componets/Auth";
import Main from "../components/layouts/Main";

const Public: React.FC = () => {
  return (
    <>
      <Switch>
        <Route exact path="/login" component={Auth} />
        <Route exact path="/" component={Main} />
      </Switch>
    </>
  );
};

export default Public;

将分割的文件导入

import Public './router/Public';

const App: React.FC = () => {
  return (
    <BrowserRouter>
      <>
        <Header />
        <Container fixed>
          <Public />
        </Container>
        <Footer />
      </>
    </BrowserRouter>
  );
};

完结了

我正在学习React Router。如果有更多的路由变体和实践内容，我会进行更新。