链接到 React 中的另一个页面

Question

我想从一个 React 页面链接到静态站点上的另一个页面，但我的路由一直链接到 /#/info，这似乎没有任何作用。

我的 index.js 文件：

ReactDOM.render(<App />, document.getElementById('root'));

我的 App.js 文件：

import React from 'react'
import { HashRouter, Switch, Route, Link } from 'react-router-dom'
import Stream from './Stream.js'
import Info from './Info.js'

function App() {
 return (
  <HashRouter>
   <Switch>
    <Route exact path='/' component='Stream' />
    <Route path='/info' component='Info' />
   </Switch>
   <Link to='/info'>Info</Link>
   <Stream />
  </HashRouter>
 );
}
export default App;

我的 Stream.js：

import React from 'react'

function Stream() {
 return (
  <div>Stream</div>
 );
}
export default Stream;

我的 Info.js：

import React from 'react'
import { Switch, Route } from 'react-router-dom'

function Info() {
 return (
  <h1>Info</h1>
 );
}
export default Info;

根据this，将 url 重写为/#/info 是预期行为，但单击链接时我的内容未加载。我希望 <Stream /> 消失，并让 <Info /> 的内容取而代之。

Answer 1

如果您将实际组件而不是它们的名称作为字符串传递，您的代码就可以正常工作：

<Switch>
    <Route exact path="/" component={Stream} />
    <Route path="/info" component={Info} />
</Switch>

Answer 2

尝试使用BrowserRouter

import { BrowserRouter } from 'react-router-dom';

function App() {
  return (
   <BrowserRouter>
     <Switch>
       <Route exact path='/' component='Stream' />
       <Route path='/info' component='Info' />
    </Switch>
    <Link to='/info'>Info</Link>
    <Stream />
   </BrowserRouter>
  );
}