在 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

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

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

Add prefix to routes in React Router v4

ecmascript-6

reactjs

react-router

react-router-v4