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

而不是使用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，因为它与网址部分v1匹配。然后，它会创建一个${match.url}/login的路线，其结果为v1/login。现在，当您导航到v1/login时，您将获得Login组件。

Answer 3

如果有人想在路由器文件中使用前缀

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;

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

3 个答案: