web-dev-qa-db-ja.com

Reactルーターv4のルートにプレフィックスを追加する

React Router v4、たとえば、アプリのバージョン1のすべてのルートの前にあるv1のいくつかのパスのプレフィックスを作成したいのですが、これが私が試したことです。

<BrowserRouter>
  <Switch>
    <App path="v1" >
      <Switch>
        <Route path="login" component={Login} />
        <Route component={NotFound} />
      </Switch>
    </App>
    <Route component={NotFound}/>
  </Switch>
</BrowserRouter>

これがAppです：

import React, { Component } from 'react';
import logo from '../Assets/logo.svg';
import '../Assets/css/App.css';

class App extends Component {
  render() {
     return (
       <div>
         {this.props.children}
       </div>
     );
  }
}

export default App;

現在、このアプローチを使用していますが、機能していないようです。 http:\\localhost:3000\v1\loginに移動すると、NotFoundコンポーネントが表示されます。ここで何か助けはありますか？

reactjsecmascript-6react-routerreact-router-v4
5
Lakshay Jain

コンテナとしてAppを使用する代わりに、次のようにルートを再構築します。

<BrowserRouter>
   <Switch>
      <Route path="/v1" component={App} />
      <Route component={NotFound}/>
   </Switch>
</BrowserRouter>

これにより、/v1または/v1/whateverに移動するたびにAppがレンダリングされます。次に、Appで、子をレンダリングする代わりに、他のルートをレンダリングします。

render() {
  const { match } = this.props;

  return (
    <Switch>
      <Route path={`${match.url}/login`} component={Login} />
      <Route component={NotFound} />
    </Switch>      
  );
}

したがって、Appは2つの可能なルートでSwitchをレンダリングします。 match.urlは、URL部分v1と一致したため、v1です。次に、${match.url}/loginでルートを作成し、結果はv1/loginになります。これで、v1/loginに移動すると、Loginコンポーネントが表示されます。

6
Andrew Li

同様の問題に遭遇しました。 <BrowserRouter basename='/v2'>https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string を使用することになりました

15
cusejuice

ルーターファイルでプレフィックスを使用したい場合

import {BrowserRouter , Route , Switch } from 'react-router-dom';
import App from '../Components/v1/App';
import React from 'react';
import NotFound from '../Components/404';
import Login from '../Components/v1/Login'

var v1="/v1";

const IndexRoute = (
    <BrowserRouter>
            <Switch>
              <App path={v1}>
                  <Switch>
                    <Route path={`${v1}/login`} component={Login} />
                    <Route component={NotFound} />
                  </Switch>
              </App>
              <Route component={NotFound} />
            </Switch>
    </BrowserRouter>
  );
export default IndexRoute;
0
Lakshay Jain