在反应路由器中设置baseurl答案

【问题标题】：Setting a baseurl in a react router在反应路由器中设置baseurl
【发布时间】：2020-09-02 09:40:49
【问题描述】：

我在设置尊重当前 URL 的路由器时遇到问题。所以该网站不是一个完整的 react 构建，但它在特定路线上初始化 react 应用程序 (http://thesite.com/tv/videos/playlists)。现在，当我使用 react-router 时，它会将 URL 更改为 https://thesite.com/{reactRoute}。

所以我用window.location.pathname

import * as React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
} from 'react-router-dom';
import { createBrowserHistory } from 'history';


import HomeContainer from './containers/HomeContainer';
import PlayListContainer from './containers/PlayListContainer';


const baseUrl = window.location.pathname;
console.log(baseUrl);

const App: React.FC =
  () => {
    const history = createBrowserHistory({ basename: baseUrl });

    return (
      <Router history={history}>
        <div>
          <nav>
            <ul>
              <li>
                <Link to={{pathname: '/'}}>Home</Link>
              </li>
              <li>
                <Link to={`${baseUrl}/playlists`}>Playlist</Link>
              </li>
            </ul>
          </nav>
  
          <Switch>
            <Route path="/">
              <HomeContainer />
            </Route>
            <Route path={`${baseUrl}/playlists`}>
              <PlayListContainer />
            </Route>
          </Switch>
        </div>
      </Router>
    );
  }

export default App;

现在的问题是它维护基本 URL 并相应地预先设置 react 路由，但转到基本路由以外的任何内容都不起作用，因此单击播放列表链接不会启动播放列表路由。

非常感谢任何帮助。

【问题讨论】：

为什么不创建一个 const 文件并将其包含到组件中并在该文件中定义 base_url？
感谢您的回复。你所说的不会有什么问题仍然存在。

标签： javascript reactjs react-redux react-router

【解决方案1】：

如果您在 switch 语句中的主路由上添加 <Route exact path="/"> 应该没问题。确切参数禁用路由的部分匹配，并确保仅在路径与当前 url 完全匹配时才返回路由。这在docs 中有解释。

您的代码可能如下所示：

<Router history={history}>
  <div>
    <nav>
      <ul>
        <li>
          <Link to={{ pathname: "/" }}>Home</Link>
        </li>
        <li>
          <Link to="/playlists">Playlist</Link>
        </li>
      </ul>
    </nav>

    <Switch>
      <Route exact path="/">
        <HomeContainer />
      </Route>
      <Route path="/playlists">
        <PlayListContainer />
      </Route>
    </Switch>
  </div>
</Router>

【讨论】：