javascript - 使用 React-Router-Dom 隐藏 Url 扩展

Question

我正在使用 react-router-dom 在 React 站点中创建客户端页面。此扩展程序运行良好，但我想知道是否有一种方法可以隐藏 URL 扩展程序，使其不出现在浏览器导航栏中。

这是我的代码:

class App extends Component {
  render() {
    return (
      <div>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/airports">Airports</Link></li>
          <li><Link to="/cities">Cities</Link></li>
          <li><Link to="/courses">Courses</Link></li>
        </ul>

        <Route path="/" exact component={Home}/>
        {/* You don't always have to render a whole component */}
        <Route path="/airports" render={() => (<div> This is the airport route </div>)}/>
        <Route path="/cities" component={City}/>
        <Route path="/courses" component={Courses}/>
      </div>
    );
  }
}

因此，点击Airports 将显示www.myurl.com/airports，点击Cities 将显示www.myurl.com/城市。由于这些页面是在客户端而不是服务器端创建的，我真的很想隐藏这些扩展，这样每当我点击这些链接时，它只会显示主机名 www.myurl.com.

希望有一种简单的方法可以实现这一点。非常感谢任何帮助!

Answer 1

有两种方法:

1. 使用 Memory History

来自文档:

Memory history doesn't manipulate or read from the address bar. This is how we implement server rendering. It's also useful for testing and other rendering environments (like React Native).

像这样使用一个:

const history = createMemoryHistory(location)
render(
  <Router history={history}>
    <Route path='/' component={App}>
      <IndexRoute component={Home} />
      <Route path='about' component={About} />
      <Route path='features' component={Features} />
    </Route>
  </Router>,
  document.getElementById('app')
)

1. 使用 MemoryRouter

来自文档:

A Router that keeps the history of your "URL" in memory (does not read or write to the address bar). Useful in tests and non-browser environments like React Native.

import { MemoryRouter } from 'react-router'

<MemoryRouter>
  <App/>
</MemoryRouter>