Question

是否可以在启动路由器时在运行时动态添加新路由到路由器？例如，用户在输入中键入内容，然后创建新路由。

Answer 1

您可能想要使用 route params 。

这是一个简短的例子：

import React from 'react';
import ReactDOM from 'react-dom';
import {Router, Route, browserHistory, Link} from 'react-router';

class App extends React.Component {
  state = {
    value: '',
  }

  handleChange = (event) => {
    this.setState({
      value: event.target.value,
    });
  }

  render() {
    return (
      <div>
        <input type="text" value={this.state.value} onChange={this.handleChange} />
        <Link to={`/${this.state.value}`}>{this.state.value && `Go to /${this.state.value.toLowerCase()}`}</Link>
      </div>
    );
  }
}

const Page = (props) => (
  <h1>{props.params.term}</h1>
);

ReactDOM.render(
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <Route path="/:term" component={Page}/>
    </Route>
  </Router>,
  document.querySelector('#app'),
);

如何动态添加新路由？

1 个答案: