在 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:3000v1login时，它显示了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组件。

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;