在React Router v4中为路由添加前缀

Question

我想为React Router v4中的某些路径创建一个前缀,例如v1在我的应用程序版本1的所有路径前面.这是我尝试过的:

<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

碰到了类似的问题.使用<BrowserRouter basename='/v2'> https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string结束

Answer 2

与其将其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组件时。