内のルートにプレフィックスを追加しますが反応ルータV4

Question

私が反応中にいくつかのパスの接頭辞を作成したい

ルータ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コンポーネントを示しています。 ここにお手伝いしますか？

Answer 1

代わりにコンテナとして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はSwitch 2で可能なルートをレンダリングします。それはURLの一部v1に一致したので、ここでmatch.urlはv1です。次に、${match.url}/loginのルートが作成され、結果はv1/loginになります。ここでv1/loginに移動すると、Loginコンポーネントが表示されます。

Answer 2

いくつかのいずれかがまだルータファイルに接頭辞を使用したい場合は

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; 

Answer 3

は、同様の問題に出くわしました。 <BrowserRouter basename='/v2'> https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string