javascript - 如何在路径不明确的子文件夹中设置 React Router

Question

我是 react 路由器的新手，想知道是否有人知道如何在以下情况下设置它。

假设我们有一个 php 应用程序在 'http://www.example.com' 上运行。在特定路线上，我们有一个正在运行的 react 应用程序，例如 'http://www.example.com/misc/stats/'这个应用程序有两条路线 '/'和一个模棱两可的'/:user' 。

我正在使用 React Router 4。如何从该文件夹提供应用程序并使路由相对于该 url。目前我尝试设置 basename就像这样。

ReactDOM.render(
  <Provider store={store}>
    <Router basename={basePath} history={history}>
      <App />
    </Router>
  </Provider>,
  root,
);

然后在 <App />我有一个简单的设置。

const Test1 = () => (<div>Test1</div>);
const Test2 = () => (<div>Test2</div>);

class App extends Component {
  render() {
    return (
      <div>
        <Link to="/">A</Link> | <Link to="/b">B</Link>
        <Switch>
          <Route path="/a" component={Test1} />
          <Route path="/b" component={Test2} />
        </Switch>
      </div>
    );
  }
}

但这行不通。有什么想法吗？此外，我最关心的是如何处理用户的直接网址，例如'http://www.example.com/misc/stats/johndoe'当然没有 johndoe 文件夹，该应用程序由 'stats' 提供服务文件夹。我相信我需要将所有请求发送至 /misc/stats/(*)至/misc/stats/index.html但我不太确定。

Answer 1

看起来您想添加一个参数 - 所以它看起来像这样:

<Route path="/misc/stats/:user" component={Test1} />

您可以像这样定义链接:

<Link to=`/misc/stats/${user}`>B</Link>

${user}当然是您将传递包含用户名的链接的变量。

然后你要做的就是拥有组件 Test1通过 this.props.match.params.user 使用该参数并执行您需要对该用户执行的操作来自定义 View 。