在React Router v4中爲路由添加前綴

Question

我想爲我的應用版本1的所有路由前面的React Router v4中的某些路徑創建前綴，例如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> 

這將使App渲染每當你導航到/v1或/v1/whatever。然後，在App，而不是渲染的孩子，使你的另一路線：

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

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

因此，App將呈現兩種可能的路徑一Switch。 match.url這裏是v1，因爲它匹配的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