问ReactJS中的路由

EN

export default ( <Router history={browserHistory}> 
<Route component={App}> 
<Route path='/' component={Home} /> 
<Route path='/submissions' component={Submissions} />
<Route path='/location' component={Location} /> 
<Route path='/login' component={Login} /> 
<Route path='/dashboard' component={Member} /> 
</Route> </Router> );

import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

import { Route, Redirect, Switch } from "react-router-dom";
class App extends Component {
  render() {
    return (
      <div>
        <NavBar />
        <main className="container">
          <Switch>
            <Route path="/not-found" component={NotFound} />
            <Route path="/register" component={RegisterForm} />
            <Route path="/login" component={LoginForm} />
            <Redirect from="/" exact to="/home" />
            <Redirect to="/not-found" />
          </Switch>
        </main>
      </div>
    );
  }
}

export default App;

<Route path="/register" component={RegisterForm} />

import { Link } from "react-router-dom";

  <div className="col">
      <Link to="/products/new" className="btn btn-primary my-2">
        New Products
      </Link>
 </div>

<Route path="/products" render={(props) => <Products sortBy= “newest” {...props} /> }  />

handleSave = ( )  => { this.props.history.push ("/products"); };

<div>
        <h2> productDetails-{this.props.match.params.id} </h2>
    </div>