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

Posted 2023-02-21

【中文标题】在 React Router v4 中为路由添加前缀

【英文标题】：Add prefix to routes in React Router v4

【发布时间】：2018-01-11 08:11:48

【问题描述】：

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

【问题讨论】：

我们能看到App吗？

好的，再次检查：)

尝试删除第二个 <Route component=NotFound/> 并查看结果。很可能是在那里匹配的。

【参考方案1】：

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

【参考方案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;

【参考方案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 组件。

【讨论】：

好的，但是我们有什么办法可以在路由文件而不是组件文件中做到这一点，以便我的路由逻辑在路由文件夹中更有条理？

@LakshayJain 我不这么认为，除非您明确列出每条可能的路线。在以前的 React Router 版本中，您可以使用嵌套路由来完成您想要的操作，但在 v4 中，除非您这样做，否则这是不可能的。

那么我应该为每个前缀创建布局文件并将其用作您的答案的路由文件吗？

@LakshayJain 这一切都取决于。我会亲自将每个版本组织到文件夹中（例如 v1、v2 等）。然后在App中，使用require动态导入如const Login = require(`$match.url/Login.js`)。

好的，谢谢你帮助我，我也想出了如何在你的例子的帮助下用我的方法做同样的事情。我把它发布在答案中