javascript - 链接到 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>