Question

我是新的反应路由器，并想知道是否有人知道如何在以下情况下进行设置。

假设我们在'http://www.example.com'上运行了一个php应用程序。在特定路线上，我们有一个反应应用程序正在运行，例如'http://www.example.com/misc/stats/'此应用有两条路线'/'和一条不明确的路线'/:user'。

我正在使用反应路由器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文件夹，应用程序是从{{1}提供的}文件夹。我相信我需要将所有请求发送到'stats' /misc/stats/(*)，但我不太确定。

Answer 1

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

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

您可以像这样定义链接：

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

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

您要做的是让组件Test1通过this.props.match.params.user使用该参数，并执行您需要对该用户执行的操作以自定义视图。

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

1 个答案: