在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