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

Question

我想为 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 组件。 这里有什么帮助吗？

Answer 1

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

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

不要使用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 组件。