React router 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

但是我无法打开任何指定的路由，总是得到 "Cannot get /profile"，注意我正在使用 webpack 作为 Web 开发包。

Answer 1

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

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

为了使这种行为起作用，您需要实现服务器端呈现，或者您可以使用 React-Router 的哈希位置

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

React router dom routes are loaded onto React Developer tools but the routes are not working in the browser

javascript

reactjs

react-router

react-router-dom