在非React页面嵌入带React Router的React应用路由配置问题

问题根源 #

你遇到的情况是因为React Router 3.x的hashHistory默认会把hash路由直接拼接在域名后（比如test.com#/newPage），而你需要的是域名后带斜杠再附加hash路径（test.com/#/newPage），本质是缺少对路由基础路径的显式声明。

两种可行解决方案 #

方法1：给Router组件添加basename属性 #

最简单的方式是直接在Router组件上设置basename="/"，明确指定路由的基础路径为根路径，这样hash部分会自动附加在斜杠之后：

import { Router, Route, hashHistory, Link } from 'react-router-dom';

const App = () => (
  <Router history={hashHistory} basename="/">
    <Route path="/" component={Home} />
    <Route path="/newPage" component={NewPage} />
  </Router>
);

// 示例组件
const Home = () => <Link to="/newPage">跳转到新页面</Link>;
const NewPage = () => <h1>新页面</h1>;

方法2：创建自定义hashHistory实例 #

如果需要更灵活的配置，你可以手动创建hashHistory实例并指定basename参数，再将其传入Router组件：

import { Router, Route, createHashHistory, Link } from 'react-router-dom';

// 创建自定义history实例，设置基础路径为根路径
const customHistory = createHashHistory({
  basename: '/'
});

const App = () => (
  <Router history={customHistory}>
    <Route path="/" component={Home} />
    <Route path="/newPage" component={NewPage} />
  </Router>
);

效果验证 #

配置完成后，点击React应用内的路由跳转链接，URL会自动变为test.com/#/newPage，完全符合你的预期，同时路由解析也能正常工作。

内容的提问来源于stack exchange，提问作者Learner