React 路由器 dom 路由已加载到 React Developer 工具中，但路由在浏览器中不起作用

Question

我是 React 新手，目前正在研究导航栏。我有 index.js 这是我的启动文件

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import history from 'history';
import Routes from './routes/index';
import Template from './containers/Template';

ReactDOM.render( 
  (
    <BrowserRouter 
        history={history}
        routes={Routes}
    >
        <Template />
    </BrowserRouter>
  ),document.getElementById('root')
);   

路由是从如下所示的 routes/index.js 文件中导入的

import React from 'react';
import {Route, BrowserRouter, Switch} from 'react-router-dom';
import Template from '../containers/Template';
import Home from '../containers/Home';
import Profile from '../containers/Profile';

const createRoutes = () => {
  return (
      <BrowserRouter>
      <Switch>
        <Route path= '/' component= {Template}/>
        <Route path= '/' component={Home}/>
        <Route path= {'/profile'} component={Profile}/>  
      </Switch>
      </BrowserRouter>
  )
}


const Routes = createRoutes();

export default Routes;

我的主要问题是，当我使用 chrome 和 React Developer 工具时，我可以看到与 BrowserRouter 对象相关的路由，如下所示 Routes in the Browser element inspection

但是我无法打开任何指定的路由总是得到“无法获取 /profile”，请注意我使用 webpack 作为 web 开发包。

Answer 1

这里发生的是您的 webpack-dev-server 正在尝试为您提供一个名为 /profile 的 html 页面，因为您使用的是单页应用程序，所以该页面不存在。

看看这个link，但归根结底，这是 webpack-dev-server 的预期行为，因为/profile html 页面不存在。

为了让这种行为发挥作用，你需要实现服务器端渲染，或者你可以使用 React-Router 的哈希位置