web-dev-qa-db-ja.com

ReactJSの動的ルーティングとは

Reactの動的ルーティングについて、私はインターネットの周りにいた。しかし、それがどのように機能し、あらゆる意味で静的ルーティングとどのように異なるかを説明するものは見つかりませんでした。

React-Routeを使用して同じページに何かをレンダリングしたいとき、物事がどのように進行するかをよく理解しました。

私の質問は、まったく新しいページをレンダリングしたいときにどのように機能するのかということです。この場合、そのページ内のすべてのDOMを再レンダリングする必要があるためです。したがって、それは静的ルーティングでしょうか？またはいくつかの点でまだ動的ですか？

明確になったことを願っています。前もって答えてくれてありがとう、感謝します！

reactjsroutingreact-router
11
Red fx

上記の説明はStaticvsDynamicルーティングに対して正しいとは思いません。また、Webにはあまり説明がありません。それが、 React Router Docs。 ドキュメントから非常に素晴らしい説明があります

Rails、Express、Emberを使用した場合、Angularなど。静的ルーティングを使用しました。これらのフレームワークでは、レンダリングが行われる前にアプリの初期化の一部としてルートを宣言します。 React v4より前のルーターも静的でした（ほとんど）。エクスプレスでルートを構成する方法を見てみましょう。

静的ルーティングでは、ルートが宣言され、レンダリングの前にトップレベルにインポートされます。

一方、動的ルーティングでは

動的ルーティングとは、実行中のアプリの外部の構成や規則ではなく、アプリのレンダリング時に行われるルーティングを意味します。

そのため、動的ルーティングでは、アプリのレンダリング中にルーティングが行われます。上記の回答で説明した例は両方とも静的ルーティング用です。

動的ルーティングの場合は、次のようになります

const App = () => (
    <BrowserRouter>
        {/* here's a div */}
        <div>
        {/* here's a Route */}
        <Route path="/tacos" component={Tacos}/>
        </div>
    </BrowserRouter>
)

// when the url matches `/tacos` this component renders
const Tacos  = ({ match }) => (
    // here's a nested div
    <div>
        {/* here's a nested Route,
            match.url helps us make a relative path */}
        <Route
        path={match.url + '/carnitas'}
        component={Carnitas}
        />
    </div>
)

最初にAppコンポーネントで1つのルートのみが宣言されます/tacos。ユーザーが/tacosTacosコンポーネントがマウントされ、次のルートが定義されます/carnitas。したがって、ユーザーが/tacos/carnitas、Carnitasコンポーネントがマウントされるなど。

したがって、ここでルートは動的に初期化されます。

24
pritesh

React-routerおよびreact-router-domを使用して、次のように記述します。

onSubmit((e) => {
e.preventDefault();
this.props.history.Push('<url>')
}

したがって、任意の場所でこの行を実行し、条件付きで別の場所に移動できます

0
AlexNikonov